Angular 2“app-root”未加载到 ExpressJS 路由上

Question

我是 NodeJS 和 Express 的新手，但我想要一个简单的“/”路由到包含 app-root 标签的 Angular 的默认 index.html (client/src/index.html)。

'/' 路由成功地为 index.html 文件提供服务，但它不会将 'app-root' 标签扩展/加载到组件的 html 中，所以我只是得到空白页面。

我不确定为什么从 Express 路由时它无法解析 app-root 标记。只有当我通过 'ng serve' 运行 Angular 时，index.html 才会成功加载 app-root 标签的内容。

我的结构如下：

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

服务器.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

看起来您没有执行 'ng build' 您的 angular 应用程序，因为 main.ts 仍然存在。

当您执行 'ng serve' 时，angular 会使用 webpack-dev-server 编译并提供它。

如果你想从你的节点为你的应用程序提供静态服务，你需要一个编译的 angular 应用程序。

您可以执行以下操作

$ cd client && ng build

将在您编译的 angular 应用程序所在的位置创建 client/dist 目录，您可以在您的 express 上提供该目录

您可以像下面一样更改 server.js 中的目录

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

希望这可以帮助