La configuration de l'application MEAN ne redirige pas les routes vers l'application Angular

Question

J'essaie de configurer une base pour une application MEAN. J'ai créé le nouveau projet en utilisant Angular CLI, ajouté Express.js, modules MongoDB à l'application. Dans le fichier app.js J'ai la configuration suivante:

var express = require('express'); 
var bodyParser = require('body-parser'); 
var session = require('express-session'); 
var path = require("path") 
var app = express(); 

var conf = require('./config/conf'); 
var server = require('http').Server(app); 

var mongoDB = require('./adapters/mongodb') 
var mongoClient = new mongoDB(conf); 

app.use(bodyParser()); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 

app.get('*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'dist/index.html')); 
}); 

app.use(function (req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,__setXHR_'); 
    res.setHeader('Access-Control-Allow-Credentials', true); 
    next(); 
}); 

mongoClient.connect(function (dbconn) { 
    app.dbconn = dbconn; 
    app.conf = conf; 
    console.log("************************************************************"); 
    console.log(new Date() + ' | CRUD Server Listening on ' + conf['web']['port']); 
    console.log("************************************************************"); 
    server.listen(conf['web']['port']); 
    var Routes = require('./routes/http-routes'); 
    new Routes(app); 
}); 

je configurer un bonjour la route mondiale pour l'instant et aucun changement fait aux sources angulaires, ce qui signifie que j'atterrir à la page de démarrage par défaut angulaire. Mais je ne peux pas atterrir à la page mais à la place une page d'écran blanc. Cependant, je peux accéder aux itinéraires en utilisant Postman. Je fais ng build puis node app.js pour exécuter l'application. Qu'est-ce que je fais mal?

Answer 1

Vous devez utiliser la voie express pour gérer les routes

Première

const router=express.Router(); 

Alors Supposons que vous avez un fichier en utilisant uniquement les routes d'authentification

const authentication = require('./routes/authentication')(router); 

Pour conclure, il suffit de faire:

app.use('/authentication', authentication); 

Cela permet une meilleure divison de vos itinéraires

Vous allez utiliser vos itinéraires ainsi

module.exports= (router)=>{ 

router.get('/',(req,res)=>{ 
res.json(message:'Hello World'); 
}); 

return router; 

Pour définir des itinéraires angulaires vous avez besoin du module de routeur, pour plus de détails lire le documentation

Answer 2

Vous ne servez que l'index.html de votre application Angular. Mais vous devez également servir les assets, css et javascript. Simple serait quelque chose comme ça (mais vous devez ajuster les noms de répertoire:

app.use('/js', express.static(path.resolve(__dirname, 'dist/js'))); 
app.use('/css', express.static(path.resolve(__dirname, 'dist/css'))); 
app.use('/assets', express.static(path.resolve(__dirname, 'dist/assets')));