Angular项目添加的HTML内容不显示、路由链接不渲染问题

两个配置错误直接导致根路径空白、导航链接不渲染：

• 路由规则未定义根路径/的匹配逻辑，访问http://localhost:4200时没有可加载的对应组件
• app.component.html是Angular根组件的模板文件，绝对不能写<!DOCTYPE html>、<head>、<body>这类全局HTML文档标签，这类标签只能放在项目入口src/index.html里，写在组件模板中会被Angular解析异常，直接导致你写的导航内容无法正常渲染

app.module.ts的配置没有问题，不需要修改。

1. 补全路由规则 #

打开app-routing.module.ts，给路由数组添加根路径匹配逻辑，访问根路径时默认跳转到部门列表页，可选加通配符兜底不存在的路径：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DepListComponent } from './dep-list/dep-list.component';
import { EmpListComponent } from './emp-list/emp-list.component';

const routes: Routes = [
  // 根路径重定向，pathMatch: full 表示完全匹配空路径才触发重定向，必须配置
  { path: "", redirectTo: "dep", pathMatch: "full" },
  { path: "dep", component: DepListComponent },
  { path: "emp", component: EmpListComponent },
  // 可选：输入不存在的路径时自动跳转到部门列表页
  { path: "**", redirectTo: "dep", pathMatch: "full" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修正根组件模板 #

清空app.component.html原有内容，删除所有无效的文档结构标签，只保留导航和路由出口即可，你之前写的随机测试字符串hdwiqhkac不需要可以直接删掉，修正后代码：

<h1>navigate</h1>
<div>
  <a routerLink="dep">department</a>
  &nbsp;&nbsp;
  <a routerLink="emp">emp</a>
</div>
<!-- 路由出口：当前路由匹配到的组件，会渲染到这个标签的位置 -->
<router-outlet></router-outlet>

保存修改后刷新页面，就能正常看到导航链接，访问根路径会自动跳转到部门列表页，点击链接也能在两个组件间正常切换。

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