Angular2跨目录组件嵌套问题：注册到app.module仍未生效

看起来你已经完成了组件注册，但嵌套效果还是没实现，我帮你梳理几个最可能的排查方向：

• 给父组件添加内容投影插槽（最容易忽略的点）
  Angular组件默认不会渲染嵌套在它标签内的内容，如果你想让<app-test>能容纳<app-view>，必须在test.component.html里添加一行<ng-content></ng-content>。这个插槽会把你写在<app-test>标签里的子组件（也就是<app-view>）渲染出来，没加这行代码的话，嵌套内容会直接被Angular忽略。

• 核对组件Selector的拼写准确性
  再仔细检查两个组件的@Component装饰器里的selector属性：

  • ViewComponent的selector是不是准确的app-view？
  • TestComponent的selector是不是准确的app-test？
    别小看大小写、字符拼写这类细节错误，它们会直接导致组件无法匹配渲染。

• 确认组件注册的完整性
  虽然你说已经注册到app.module.ts，但还是再核对一遍：

  1. 有没有正确导入两个组件？比如：

     import { ViewComponent } from './folder1/view/view.component';
     import { TestComponent } from './folder2/test/test.component';
     

     注意相对路径的写法，./或者../别用错。
  2. 有没有把两个组件都加入到declarations数组中？

     @NgModule({
       declarations: [
         AppComponent,
         ViewComponent,
         TestComponent
       ],
       // ...其他配置项
     })
     export class AppModule { }
     

• 查看浏览器控制台的错误提示
  打开浏览器开发者工具（按F12），切换到Console标签页，看看有没有报错信息。比如类似“'app-view' is not a known element”的提示，会直接告诉你问题根源——要么组件没注册，要么selector写错了。

如果以上几点都排查过还是有问题，可以把控制台的错误信息或者组件的代码片段补充出来，这样能更精准地定位问题。

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