将 <head> 标记添加到索引文件会中断快速路由答案

【问题标题】：adding <head> tags to index file breaks express routing将 <head> 标记添加到索引文件会中断快速路由
【发布时间】：2016-08-08 15:33:49
【问题描述】：

我有一个完全准系统的 express 应用，有一个 app.js 和一个像这样的 html 渲染引擎：

app.set('views', path.join(__dirname, '/views'));
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

我希望 index.html 托管一个 Angular2 单页应用程序。在我的./views 目录中，我有一个 index.html 和一个 error.html 文件。我的 index.html 文件如下所示：

<head></head>
<h1>Home</h1>
<my-app>Loading...</my-app>

有了这个设置，一切正常。但是，如果我在头部添加任何内容，例如

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<h1>Home</h1>
<my-app>Loading...</my-app>

然后我现在得到错误页面，而不是 localhost 解析到索引。为什么？

【问题讨论】：

标签： html express angular

【解决方案1】：

这是无效的 HTML。您不能将<h1> 或<my-app> 作为<head> 的兄弟。将内容移动到 <body> 标记。

尽管浏览器可能会自动添加 <body> 事件，但这是不好的做法，并且 Angular 不喜欢无效的 HTML。 Angulars HTML 解析器是严格的，如果提供的 HTML 无效，它会抛出错误（对于组件模板中的 HTML）。

我不确定这是您问题的根本原因，但我认为在未解决此问题之前进行更多调查没有多大意义。

<head> 标记可能需要 <base href="/"> 作为第一个子元素（如果未提供 APP_BASE_HREF）。

【讨论】：