【Angular】"X" is not a known element

这是我在学习Angular的过程中遇到的一个小问题。

首先使用Angular-cli新建一个工程，然后，我在app下创建一个main组件，在app/main/components下创建三个组件，即header、footer和sidebar组件。

我想让header、footer和sidebar三个组件的内容显示在main组件中，main组件的内容显示在app中。

然后，我在app/main下创建一个main.module.ts文件。

创建的文件目录如下所示。



然后，我对app.module.ts和main.module.ts文件进行修改，将需要用到的组件添加到declarations中，代码如下：





关于HTML页面的结构这里不再说明。

这时运行程序，会出现如下错误：



解决方法：

将app模块和main模块的imports和exports进行修改，即在app模块的imports中添加MainModule，在main模块的exports中添加HeaderComponent、FooterComponent和SidebarComponent，代码如下：





【注】定义模块的语法如下：

@NgModuel({
declarations: [],   // 用到的组件，指令，管道
providers: [],      // 依赖注入服务
imports: [],        // 导入需要的模块
exports: [],        // 导出的模块，跨模块交流
entryComponents: [] // 需提前编译好的模块
bootstrap: []       // 设置根组件

})
export class AppModule { }

其中最重要的属性是：

declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。

exports：declarations的子集，可用于其它模块的组件模板。

imports：本模块声明的组件模板需要的类所在的其它模块。

providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

bootstrap：指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。