新客户.md

假设 client-2 是餐厅名

1. ng g module dynamic-modules/client-2 --routing 创造新的客户模块
2. ng g component dynamic-modules/client-2/shell 在新的客户模块下创造shell组件
3. ng g component dynamic-modules/client-2/home 在新的客户模块下创造home组件
4. 在新创造的客户模块文件夹内找到routing文件（client2-routing.module.ts），把forChild改成forRoot
5. 在routing文件内define routes，eg.

    export const enum ClientRoutes {
        home = "home",
    }
   
    const routes: Routes = [
        {
            path: ClientRoutes.home,
            component: HomeComponent
        },
        {
            path: "*",
            redirectTo: ClientRoutes.home
        },
        {
            path: "**",
            redirectTo: ClientRoutes.home
        }
    ];   
   

6. 在新创造的客户模块文件夹下找到module文件（client-2.module.ts），在import里添加 DynamicComponentLoaderModule.forChild(ShellComponent), 记得重新打Dynamic以自动import DynamicComponentLoaderModule
7. 新的客户模块下找到shell.component.ts, 把class里换成如下

   constructor(private router: Router) { }
   
   ngOnInit() {
      this.router.navigate([`${ClientRoutes.home}`]);
   }
   

   记得import
8. 在shell.component.html 换成 <router-outlet></router-outlet>
9. 在 app.module.ts 里找到 manifests 数组，并在最后添加 eg:

    {
      componentId: 'client-2',
      path: 'client2-shell',
      loadChildren: './dynamic-modules/client-2/client2.module#Client2Module'
    }
   

10. 在app.component.ts里手动添加shell的import， eg: import { ShellComponent as client2Shell } from './dynamic-modules/client-2/shell/shell.component';
11. 在app.component.ts里关于host的逻辑，在对应的block里添加

    factory$ = this.dynamicComponentLoader.getComponentFactory<client2Shell>(
        'client-2'
    );