什么是模块懒加载？
即在根模块通过路由导航至子模块。
在这里，我们自定义三个模块，每个自定义的模块又有几个组件。
1.先创建一个新项目
ng new module
注意：这个项目得带有路由
2.下面创建上图所示的三个自定义模块，如果我们要在自定义模块实现路由，那就要在命令中添加：- -routing,因为我们要在自定义模块中添加几个组件，那配置路由是必须的。
ng generate module modules/自定义模块名 --routing
3.看到上面的自定义模块中仅有一个模块的ts文件和配置路由的文件，这就与内置根模块有区别了，内置根模块还带有ponent.css、ponent.html、ponent.spec.ts文件，也就是根模块根组件，下面我们也为自定义模块创建根组件。
ng generate component modules/自定义模块名
好啦，现在内置模块与自定义模块完全相同了。
4.下面我们将学习如何在根模块中动态挂载自定义模块，即实现模块懒加载。还记得在根模块是如何挂载组件的吗？我们需到app-routing.module.ts中“引入所有组件，然后在配置数组中写入对应关系”。如下所示
注意：我们现在在根模块路由到自定义模块不再需要像上面那样引入了。
下面一步步来配置路由：
先看app-routing.module.ts文件如何配置：
与配置组件不同，routes数组的对象的第二个属性是"loadChildren"，而组件的是"component"。
为了实现跳转，现在ponent.html中写如下代码：
因为我们上面在app-routing.module.ts文件中只是配置它会导航至自定义模块，但是在自定义模块又如何导航还没有配置，所以现在还要去自定义模块路由文件实现路由配置，教他怎么导航，在子模块配置导航至自身所拥有的组件就跟最上面的配置一样了，需要引入组件：
看看结果：
这已经实现了懒加载，我们接下来在自定义模块加入组件，在自定义模块同样配置路由：
a.先在自定义模块下创建组件：
b.在自定义模块的路由文件配置：
c.查看效果
注意，这样实现的方式，其组件都是加载到ponent.html的标签中：
但是如果是父子组件的话，就不是所有组件内容都加载到ponent.html中的router-outlet标签了，而是加载到父组件的router-outlet标签。
下面我们在另一个自定义模块实现父子组件：
在一个组件中引入另一个组件实现父子组件关系：
下面看看访问父子组件效果：
这里product与oldProduct是父子组件关系，product组件是挂载到ponent.html的router-outlet标签中，而oldProduct是product是的子组件，应该将内容挂载到product组件的router-outlet中，刚刚我们并没有将router-outlet标签加入到product中：
所以显示不出oldProduct的内容。
现在加上试试：
这就证明了父子组件的子组件只挂载到父组件的router-outlet标签中。
