如何在浏览器中查看Angular项目的子组件、嵌套组件与内部组件？

你之前通过输入组件对应HTML文件路径访问组件的方式完全不符合Angular的运行逻辑：
Angular是纯前端单页应用（SPA），整个应用唯一的浏览器入口是项目根目录的index.html，所有.component.html都是组件的局部模板片段，不是独立可访问的页面。开发服务器收到你输入的/app/home.component.html路径请求时，因为没有匹配的路由规则，会默认回退渲染根路径对应的App组件，这就是你只能看到App组件内容的原因。

临时快速验证（无需配置路由，适合组件开发阶段的快速排查） #

如果只是想快速确认Home组件的模板和逻辑是否正常，不需要做独立页面跳转，直接将Home组件嵌入根App组件即可：

• 打开home.component.ts文件，找到@Component装饰器中定义的selector值，CLI自动生成的组件默认选择器为app-home
• 打开app.component.html，在任意位置写入对应选择器标签，例如：<app-home></app-home>
• 保存文件后，Angular开发服务器会自动触发热重载，直接访问http://localhost:4200即可看到Home组件的渲染效果。

配置独立路由访问 #

如果需要给Home组件配置独立的浏览器访问路径，需要通过Angular路由模块实现规则匹配：

• 在项目的路由配置文件（通常为app-routing.module.ts）的routes数组中新增Home组件对应的路由规则：

  const routes: Routes = [
    { path: 'home', component: HomeComponent }
  ];
  

• 确认根组件app.component.html中存在路由出口标签<router-outlet></router-outlet>，匹配路由的组件会自动渲染在这个标签的位置
• 保存配置后，直接在浏览器访问http://localhost:4200/home，即可看到独立的Home组件展示效果。

• 模板中写入的组件标签名必须和组件定义的selector完全一致，否则组件无法正常渲染
• 配置路由规则时需要手动导入对应的HomeComponent类，避免出现路由匹配失败的问题
• 不要尝试通过拼接组件HTML文件路径的方式访问组件，这类模板片段不会被开发服务器作为独立页面对外暴露

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