组件存放在根组件中 链接：https://cli.angular.io/
一般我们要自定义的组件，会在单独的存放一个文件夹中 例如：components文件夹
方法一 .在app文件夹中新建components文件夹，
方法二 使用命令ng g 来创建
1）cd到项目中
2）输入ng g 会出现一些提示
3）ng g component components / news(新建一个news组件)
引用组件：
需要使用此组件，则需要在根组件中进行引用之后才可以使用
方式一，如果你是手动添加进去的，如需要在app_module.ts（根组件）中引用才可以
例如：新建一个news组件
在app.module.ts中 引用 import { newComponent }from ‘./components/news/news.component‘
@NgModule中配置（{
declarations：[newsComponent] 添加进去
}）
方式二：如果是命令添加进去的，只需要去根组件中进行查看，是否添加了（一般都会自动添加，无需在进行添加）
查看新建组件的名字（类似html的标签），引入的时候需要使用
查看组件的名字：
在news.component.ts组件中的@Component({})中的selector后接的就是组件名：
@Component （{
selector：‘组件名’, 例如组件名是app-news
templatenUrl:‘‘,
styleUrls[]
}）
如果在根组件中引用news组件,则在app.component.html中使用
<app-news></app-news>
页面的内容还是需要写在对应组件中，也就是说写在news,component.html中
然后输入命令 ng serve --open 运行页面
原文地址：https://www.cnblogs.com/rockyjs/p/11237117.html