Angular 2'app-root'未在ExpressJS路由上加载

Question

Im new to NodeJS and Express but i want a simple '/' route to Angular's default index.html (client/src/index.html) which contains the app-root tag.

The '/' route successfully serves the index.html file but it doesn't expand/load the 'app-root' tag into the component's html so i just get blank page.

Im not sure why it cant resolve the app-root tag when routed from Express. Only if i run Angular by 'ng serve' does the index.html successfully load the contents of the app-root tag.

My structure is as follows:

/client
    /e2e
    /node_modules
    /app
        app.component.css/html/ts
        app.module.ts
    /src
        index.html
        main.ts
package.json
server.js

server.js

var express = require('express');
var path = require('path');

var port = 80;

var app = express();

// set static folder
app.use(express.static(path.join(__dirname, '/client')));

app.get('/', function(req, res, next){
    res.sendFile(__dirname + '/client/src/index.html');
});

app.listen(port, function(){
    console.log("Server started on port " + port);
});

Answer 1

It look like you didn't do 'ng build' your angular app because main.ts is still there.

When you do the 'ng serve', angular compiles and serve it using webpack-dev-server.

If you want to serve your app from the your node as static, you need a compiled angular app.

You can do the following

$ cd client && ng build

There will be client/dist directory created where your compiled angular app is located and you can serve that on your express

You can change the directory in you server.js like below

app.use(express.static(path.join(__dirname, '/client/dist')));
res.sendFile(__dirname + '/client/dist/index.html');

Hope this helps