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

Question

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

“/”路由成功地为 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

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

看起来您没有“构建”您的 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');

希望对你有帮助