<!-- home.component.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="/Users/swaroopvontela/my_portfs/src/app/home/home.component.css">
</head>
<body>
<header>
<img src="/Users/swaroopvontela/my_portfs/src/ironP.jpg" alt="Website Logo">
<h1>Swaroop reddy vontela</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<div class="container">
<h2>Home Page</h2>
<p>web site under construction...</p>
<p>looking for aws data engineer positions</p>
</div>
</body>
</html>
i am trying to create a web page i guess i am using ssr(server side rendering) and ssg(static site generation) nothing fancy. i have a home component and the selector name is app-home. and when i do ng serve i am seeing the following error message in the console area. can you explain me why?
[Error] ERROR – Error: NG0500: During hydration Angular expected <html> but found <meta>.
Angular expected this DOM:
<app-home _nghost-ng-c2925092162="">
<html lang="en">…</html> <-- AT THIS LOCATION
…
</app-home>
Actual DOM is:
<app-home _nghost-ng-c2925092162="">
<meta _ngcontent-ng-c2925092162="" charset="UTF-8">…</meta> <-- AT THIS LOCATION
…
</app-home>
Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.
To fix this problem:
* check the "_HomeComponent" component for hydration-related issues
* check to see if your template has valid HTML structure
* or skip hydration by adding the `ngSkipHydration` attribute to its host node in a template
Find more at https://angular.io/errors/NG0500 — chunk-BF4XLKTU.js:3311
Error: NG0500: During hydration Angular expected <html> but found <meta>.
things tried:
- i have checked the home component and did not find any issues
- the template has a valid html syntax
- how do i skip the hyderation? what is a host node?