Angular 模块拥有的组件，指令，管道这些东西，要把它们放在模块的 declarations 里面。先在终端可以给之前生成的 UserModule 模块创建一个组件。

ng generate 一个 component，名字是 user。 命令会生成一个叫 UserComponent 的组件，组件会放在 app, user 目录的下面。

打开 user 目录里的这个 UserModule 模块，因为组件的名字是 user，所以命令会自动更新了在 user 目录下面的这个 UserModule 模块。

文件的顶部导入了 user.component 文件里定义的 UserComponent 组件。

declarations

在模块的 declarations 里面，要列出这个模块拥有的东西，这里已经添加好了这个 UserComponent，意思就是这个组件属于 UserModule 这个模块，组件只能属于一个模块。注意这里是命令自动帮我们更新了这个模块文件，如果你是手动创建的组件，你需要自己先在文件顶部导入它，然后把它再添加到这个 declarations 里面。

exports

如果要在其它的模块里使用这个 UserComponent 组件，我们需要先让这个模块导出这个组件，然后在其它的模块里，再导入这个 UserModule 模块。

在 UserModule 里，可以添加一个 exports，在模块导出的东西里面，添加一个 UserComponent，这样其它的模块如果导入 UserModule 模块，就可以使用它的 UserComponent 组件了。

imports

打开 AppModule 模块，我想在这个模块的组件里，用一下 UserModule 模块里的 UserComponent，需要在模块的 imports 里面，导入 UserModule 模块。输入 UserModule，编辑器会自动文件顶部导入 user 目录里的 user.module 文件里导出的 UserModule 。

现在我们就可以在 AppModule 的组件里使用 UserModule 模块里的 UserComponent 组件了。

打开 AppComponent 组件，添加一个 app-user 元素，这是在 UserComponent 组件里设置的 selector，也就是 UserComponent 组件会在这个元素里显示。

预览

回到浏览器可以预览一下。在页面上会显示 UserCompoennt 组件的视图内容。回到项目，去掉 AppModule 模块的导入里添加的这个 UserModule。再回到浏览器试一下。

页面显示空白，在控制台上会出现提示 app-user 是一个未知元素。 这是因为在 AppComponent 所属的 AppModule 模块里，并没有导入 UserModule ，也就不能使用 UserModule 模块里导出的 UserComponent 组件。

恢复一下导入，现在页面就可以正常显示了。

再回到项目，这次打开 UserModule 模块，去掉模块的 exports 里的这个 UserComponent 。 然后回到浏览器预览一下，这次又会提示 app-user 是一个未知元素。

虽然在 AppModule 模块的导入里添加了 UserModule ，但是这次在 UserModule 模块里，并没有在它的导出来说明模块可以对外提供它的 UserComponent 组件，这样在其它的模块里即使导入了 UserModule 模块，也不能使用模块里的 UserComponent 组件。

回到 UserModule 模块，恢复一下导出这个 UserComponent，再到浏览器上预览一下，这回就可以正常显示 UserComponent 组件的视图内容了。