运行我的 Angular 17 应用程序时，我会在控制台中收到两个错误，部分错误消息为：
ERROR Error: NG0500: During hydration Angular expected <html> but found <meta>.
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.
这个问题可能以某种方式与 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/[email protected]/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">
但是如果我删除，我会得到类似的错误：
（删除后部分错误信息）
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/[email protected]/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/[email protected]/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) {}
}
问题的原因可能是什么？
我遇到了同样的问题，我的问题来自于“index.html”已经有
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gestion des Produits</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
然后，索引通过 放置 app.component 的代码。因此，如果其中有相同的代码开头，它就会阻止一切。
所以尝试删除
<!-- UŻYWAJ BULMA DO GOTOWYCH KOMPONENTOW-->
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
来自你的app.component，它应该可以工作。