angular创建子路由的过程，使用懒路由来处理

1、首先使用ng g c config来创建component，如下图所示：

2、使用ng g m config --routing 创建模块和路由，如下图所示：

3、有了子路由，那还应该有子的component，同样使用ng g c命令来创建（注意创建时要先cd config），如下图所示创建的两个component：

4、此时目录中就会多出相应的文件了，如下图所示：

5、那么我们只需要改造config.module.ts和config-routing.module.ts即可，首先修改config-routing.module.ts，此文件的代码如下图所示：

然后修改成如下图所示的代码：

注意：canActivate选项可以删除不要

6、修改config.module.ts代码，自动生成的代码如下图所示：

修改成如下代码：

注意：imports中的模块根据自己的需要添加。

7、然后在上级模块中添加懒路由，只需要添加入下图所示的信息即可：

8、此时运行当点击时会提示如下错误提示：

ERROR Error: Uncaught (in promise): Error: Component ConfigComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component ConfigComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:26121)
    at compiler.js:26097
    at Array.forEach (<anonymous>)
    at compiler.js:26094
    at Array.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26083)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25970)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15723
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15771
next @ core.js:17770
schedulerFn @ core.js:13514
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13498
(anonymous) @ core.js:17320
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17257
onHandleError @ core.js:17320
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ config-config-module.js:1

如下图所示：

9、出现此错误原因是对于ConfigComponent这个组件没有加入到模块中，那么需要我们在ConfigModule中的declarations加入此模块，如下代码所示：

10、此时在运行点击到对应的路由上又会出现如下错误：

core.js:15723 ERROR Error: Uncaught (in promise): Error: Type ConfigComponent is part of the declarations of 2 modules: BatteryModule and ConfigModule! Please consider moving ConfigComponent to a higher module that imports BatteryModule and ConfigModule. You can also create a new NgModule that exports and includes ConfigComponent then import that NgModule in BatteryModule and ConfigModule.
Error: Type ConfigComponent is part of the declarations of 2 modules: BatteryModule and ConfigModule! Please consider moving ConfigComponent to a higher module that imports BatteryModule and ConfigModule. You can also create a new NgModule that exports and includes ConfigComponent then import that NgModule in BatteryModule and ConfigModule.
    at syntaxError (compiler.js:2430)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._addTypeToModule (compiler.js:18792)
    at compiler.js:18692
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18683)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25970)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:18361
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

如下图所示：

11、这是由于有两个Module同时在declarations添加了ConfigComponent，通过寻找我们在上级路由中的模块中发现有添加的ConfigComponent，如下图所示：

会出现这种问题是由于先创建了ConfigComponent，然后又创建了子路由才会将ConfigComponent自动添加到上级路由中了，手动的将ConfigComponent删除掉即可正常路由了。