Angular 17 hydration报错NG0500：预期<html>却找到<meta>的原因

运行Angular 17应用时，控制台触发NG0500错误：水合过程中Angular预期<html>标签，但实际找到<meta>标签；删除<meta>后，又出现预期<html>却找到<link>的同类错误。问题根源在于根组件模板错误包含了<html>、<head>等页面根级别标签。

报错详情 #

初始报错 #

ERROR Error: NG0500: During hydration Angular expected but found .

Angular expected this DOM:

<app-root _nghost-ng-c1019702276="">
  <html lang="en">…</html>  <!-- AT THIS LOCATION -->
  …
</app-root>

Actual DOM is:

<app-root _nghost-ng-c1019702276="">
  <meta _ngcontent-ng-c1019702276="" charset="UTF-8">…</meta>  <!-- AT THIS LOCATION -->
  …
</app-root>

Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.

删除<meta>后的报错 #

Angular expected this DOM:

<app-root _nghost-ng-c563235177="">
  <html lang="en">…</html>  <!-- AT THIS LOCATION -->
  …
</app-root>

Actual DOM is:

<app-root _nghost-ng-c563235177="">
  <link _ngcontent-ng-c563235177="" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulm…">…</link>  <!-- AT THIS LOCATION -->
  …
</app-root>

相关代码 #

app.component.html #

<!-- UŻYWAJ BULMA DO GOTOWYCH KOMPONENTOW-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="">
        <img src="assets/images/logo.png" alt="Logo">
      </a>
  
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
  
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>
  
        <a class="navbar-item" href="Dashboard">
          DASHBOARD
        </a>
      </div>
    </div>
   </nav>
    <router-outlet></router-outlet>
</body>


</html>

app.component.ts #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { APIConnectionService } from '../../APIConnectionService/api-connection.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Orch_FrontAngu_Praca';

  constructor(private API_COMM : APIConnectionService) {}

}

解决方案 #

Angular的根组件<app-root>是挂载到项目根目录index.html的<app-root>标签上的，而index.html本身已经包含了<html>、<head>、<body>这些页面根级别标签。在app.component.html中重复添加这些标签，会导致SSR水合时DOM结构不匹配。

修复步骤：

1. 打开项目根目录的index.html，确认它已包含<html>、<head>、<body>，且<app-root>位于<body>内部。
2. 修改app.component.html，移除<html>、<head>标签，将原本在<head>里的内容转移到index.html的<head>中：
   • 把<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">和Bulma的CSS链接放到index.html的<head>中。
3. 保留app.component.html中的导航栏和路由出口，修改后的代码如下：

<!-- UŻYWAJ BULMA DO GOTOWYCH KOMPONENTOW-->
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="">
      <img src="assets/images/logo.png" alt="Logo">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item" href="Dashboard">
        DASHBOARD
      </a>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

完成上述修改后，水合过程中的DOM结构会匹配，NG0500错误将消失。

内容的提问来源于stack exchange，提问作者Aethillium