为啥 Angular 2 不加载默认的应用程序根组件？

Posted 2023-03-07

【中文标题】为啥 Angular 2 不加载默认的应用程序根组件？

【英文标题】：Why Angular 2 doesn't load default app-root component?为什么 Angular 2 不加载默认的应用程序根组件？

【发布时间】：2017-11-15 20:48:23

【问题描述】：

我正在尝试启动通过 Angular CLI 生成的 Angular 应用程序，但似乎默认的 app-root 组件没有加载。需要说，我正在使用代理来连接 Angular 应用程序和 Express 服务器，并且我同时运行两个脚本：node bin/www 用于 express/node.js 启动，ng serve --proxy-config proxy.config.json 用于启动 Angular 并创建代理连接，看起来像这样（package.json的一部分）：

"scripts": 
  "start": "concurrently --kill-others \"node bin/www\" \"ng serve --proxy-config proxy.config.json\""

索引页面加载正常，但似乎 app-root 组件（默认组件，从 Angular CLI ng new 创建）没有加载： 这是我的 node.js/express uses 和一条路线：

var express = require('express');
var router = express.Router();
var app = express();
var path = require('path');

app.use(express.static('./src/client/'));
app.use(express.static('./'));
app.use(express.static('./tmp'));
app.use('/*', express.static(path.resolve('src/client/index.html')));

router.get('*', function(req, res) 
    res.sendFile(path.resolve('src/client/index.html'));
);

module.exports = router;

以及我的项目结构（如果需要）：

我错过了什么？为什么默认的app-root 组件没有加载？ （需要说，当我运行ng serve时，它会根据需要启动角度主页并且组件是好的，所以我认为问题出在快递的某个地方。

提前致谢

【问题讨论】：

使用 Ng Serve 和从 express 服务是重复的。即便如此，您还是会从 build 文件夹而不是 src 文件夹中提供服务。

@TaylorAckley，我尝试只启动 express 并默认使用名为“dist”的构建文件夹，但仍然遇到同样的问题（但现在所有脚本都已加载）。

@Ced，这是我收到的index.html：ibb.co/czJe2k，我的网络标签：ibb.co/hE3Jv5

【参考方案1】：

您应该提供dist/ 文件夹after calling ng build --prod (the --prod is important, as the default is --dev) 的内容。所以，它会是这样的：

"scripts": 
  "start": "ng build --prod && node bin/www"

而且，或多或少地调整您的快速脚本：

app.use(express.static('./dist'));
app.use('/*', express.static(path.resolve('dist/index.html')));

router.get('*', function(req, res) 
    res.sendFile(path.resolve('dist/index.html'));
);

【讨论】：

您的建议看起来不错，但我已尝试使用它，但现在出现 404 错误。也许您在某处拼写错误或忘记在答案中包含某些内容？我觉得，你的建议很接近。需要说，我对 node/express 完全陌生

哦，是的，我忘了添加index.html。让我知道它是否有效。

我试过了，带有脚本的 index.html 加载正常，但我仍然得到一个空的 app-root 元素。但我的构建结果（dist 文件夹）仅包含 client/index.html 和五个 ...bundle.js 文件。所有这些都包含在index.html 中，但是当我尝试在新选项卡中打开其中一个时，我没有看到任何预期的代码。似乎他们并没有真正包括在内。我认为，这是另一个问题，但如果您对此有任何想法，请告诉我

嗯.. 好像是这样。行为与您运行 ng serve 时的行为不同？不应该。

是的，它们是不同的。无论如何，我会尝试自己找到最终的解决方案，你让我更接近正确的解决方案。谢谢