Angular4模板解析错误：组件声明分离方案求助

看起来你在分离组件声明模块时踩了Angular模块系统的几个常见坑，我来帮你一步步排查解决：

1. 修正模块命名与规范 #

首先，Angular的模块类名必须以Module结尾，这是框架的约定，也能避免类名混淆。同时建议文件名对应调整，把Components.ts重命名为ComponentsModule.ts，并修改类名：

import { NgModule } from '@angular/core';
// 注意路径：如果这个模块文件和组件在同级目录，就把../改成./，否则保持原路径
import { Component1} from '../components/Component1.component';
import { Component2} from '../components/Component2.component';
import { Component3} from '../components/Component3.component';

@NgModule({
  declarations: [ Component1, Component2, Component3 ]
})
export class ComponentsModule { } // 这里改成带Module后缀的类名

2. 把组件模块导入到使用它的主模块 #

你创建的ComponentsModule只是一个独立的模块，Angular不会自动识别它，必须把它导入到需要使用这些组件的模块（比如根模块AppModule）的imports数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 根据你的实际文件路径调整这个导入路径
import { ComponentsModule } from './ComponentsModule';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ComponentsModule // 关键：把组件模块添加到这里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. （可选）添加组件导出（用于跨模块共享） #

如果你的ComponentsModule是用来给多个模块共享组件的，记得把组件添加到exports数组里，这样其他导入该模块的模块才能直接使用这些组件：

@NgModule({
  declarations: [ Component1, Component2, Component3 ],
  exports: [ Component1, Component2, Component3 ] // 导出组件供外部使用
})
export class ComponentsModule { }

4. 检查组件与模板的基础配置 #

最后再确认两个细节：

• 每个组件的@Component装饰器里，selector是唯一且合法的（比如以app-开头），templateUrl路径正确；
• 在模板中使用组件时，必须用组件的selector标签，比如<app-component1></app-component1>，不能直接写组件类名。

按照这些步骤调整后，你的模板解析错误应该就能解决了——本质问题是你创建的组件模块没有被Angular的模块系统纳入管理，导致模板无法识别组件。

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