Pesquisa de site

node.js - MEAN: servidor nodejs para aplicativo Angular - Como eu sirvo rotas do Angular

Aqui está o meu nó server.js, ele está na raiz do projeto com sua própria configuração npm. Todos os arquivos Angular estão em /client, portanto após ng build o dist estará em client/dist

const express = require('express');
const colors = require('colors');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');

const PORT = process.env.port||'3200';

// init "app"
const app = express();

app.use(cors({origin: `http://localhost:4200`}));

// angular entry point
app.use(express.static(path.join(__dirname, 'client/dist')));

//parse incoming data before routes
app.use(bodyParser.json())

// api routes
app.use('/api',require('./api/api'));

// error middleware
app.use(function(err, req, res, next){
    console.log(`${err}`.red.bold)
    res.status(422).send({error: err.message });
});

// listen
app.listen(PORT, function(){
    console.log(`app running on ${PORT}...`.magenta);
});

Quando eu acesso o servidor http://localhost:3200/ vejo meu app Angular. e quando eu acesso http://localhost:3200/api/someExpressRoute eu obtenho minhas funções da API. ótimo

Agora eu preciso descobrir como servir rotas do Angular. Por exemplo, http://localhost:3200/about faz parte do meu aplicativo de página única Angular. Mas quando eu acesso esse URL, o servidor não sabe o que fazer.

Como eu configuro este servidor para tratar http://localhost:3200/* como uma rota do Angular que é servida a partir do index?

Resposta #1

Aqui está como eu sirvo minha aplicação Angular via Node.js:

var express = require('express'),
   path = require('path'),
   fs = require('fs');
var compression = require('compression');
var app = express();
var staticRoot = __dirname + '/';
var env = process.env.NODE_ENV || 'development';

app.set('port', (process.env.PORT || 5000));

app.use(compression());
/* other middleware */

/* place any backend routes you have here */    

app.use(function(req, res, next) {
    //if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if (accept !== 'html') {
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== '') {
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

});

app.use(express.static(staticRoot));

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Ao servir a aplicação, certifique-se de que todos os arquivos dist do frontend estejam na mesma pasta que este arquivo (que eu chamo de index.js)

Resposta #2

Servindo aplicação Angular com NodeJs Express

Se você quiser servir seu aplicativo Angular com NodeJs, você precisa servir o arquivo index.html do seu build Angular usando a função res.sendFile() do expressJs. Veja a documentação para mais detalhes.

Antes, você precisa garantir que seu middleware embutido do Express chamado static aponte para uma pasta contendo todos os arquivos gerados pelo Angular durante a compilação (geralmente é a pasta dist do seu aplicativo frontend)

Servindo Rota Angular

Se você quer que seu Angular Router funcione, você precisa redirecionar todas as suas requisições para o frontend. Você também pode adicionar algumas verificações como @Syntactic Fructose sugere fazer com a verificação da requisição para HTML ou arquivo.

Exemplo

Apenas um exemplo básico de como você pode implementar isso

import express, { Request, Response , Application } from 'express';
import path from 'path';
import http from 'http';
import { router } from './path/to/my/api/routes';

const app = express();

const frontendFiles = "path/to/your/frontend/dist/folder";

// Point static middleware to your Angular build
app.use(express.static(frontendFiles));

// Your api routes
app.use('/api', router);

// Do whatever you want like
// app.get('/someStuff', (req, res) => {...}

// Then your last route is
app.get('/*', function(req, res){
  res.sendFile(path.join(frontendFiles, '/index.html'));
});

// Serve your app
const httpServer = new http.Server(app);
const port = 3000;
httpServer.listen(port, function() {
    console.log(`app fire on http://localhost:${port}`);
});
Comentar

Para maior simplicidade na implantação, sugiro que você use a variável .env para a variável frontendFiles.

Artigos relacionados