Chrome无法在Angular产品模式下加载脚本/样式表

Question

我将我的Angular应用程序部署在nodejs Express服务器中。 Chrome不想加载除index.html以外的任何内容，因为它在GET请求的URL末尾添加了一个斜杠，因此网络服务器返回404。

这是chrome加载脚本/样式表时的摩根截图。

这是Firefox正确加载脚本的屏幕截图。

我已经使用参数--aot和--prod编译了我的角度应用程序，并将编译后的文件放入了一个静态dist文件夹中。这些脚本似乎以正确的方式嵌入到index.html中。我真的看不到这种奇怪行为的任何原因。

Answer 1

好的，我自己解决了这个问题。在尝试了构建设置之后，我发现问题与--prod标志有关。在生产构建过程中，将哈希或伪随机字节附加到相应的文件名中，以区分不同的构建版本。哈希/伪随机字节用“。”分隔。从实际的文件名（如屏幕截图所示）。当您添加“。”时，Chrome会以某种方式发生奇怪的事情。像这样放在文件名中间，并弄乱GET请求的URL。 （非常奇怪，因为Angular是Google的SPA框架和Chrome Google的浏览器以及我测试过的所有其他浏览器都没有问题）

Tl; dr删除“。”从文件名和从src脚本导入index.html即可解决此问题，并且一切在Chrome中都可以正常运行。

所以把这个

<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js">

为此，请加载每个脚本/样式表。

<script type="text/javascript" src="runtime26209474bfa8dc87a77c.js">

对我的服务器端代码感兴趣的任何人的PS看起来像这样：

app.use(express.static('dist/compiledapp'));

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