【angular路由】路由懒加载写法

路由懒加载一直没明白怎么加载的，现在记录一下

要实现的功能

组件：
home组件下有setting和welcome组件，默认进入home组件显示welcome组件的内容
product组件下有pcate和plist组件

app.component.html

<header class="header">
  <a [routerLink]="[ '/home']" routerLinkActive="active">首页</a>
  <a [routerLink]="[ '/product']" routerLinkActive="active">商品</a>
  <a [routerLink]="[ '/news']" routerLinkActive="active">新闻</a>
</header>
<router-outlet></router-outlet>
<!--
  单页面应用的好处：  运行速度快
  
  坏处：  一个页面不利于seo优化
-->

app.routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 这里不用引入组件
const routes: Routes = [
  {
    path: 'home',
    // 使用() => import('./home/home.module').then(m => m.HomeModule) ng build --prod打包后会报错：Runtime compiler is not loaded
    // loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    loadChildren: './home/home.module#HomeModule'
  }, {
    path: 'product',
    // loadChildren: () => import('./product/product.module').then(m => m.ProductModule),
    loadChildren: './product/product.module#ProductModule'
  }, {
    path: 'news',
    // loadChildren: () => import('./news/news.module').then(m => m.NewsModule),
    loadChildren: './news/news.module#NewsModule'
  }, {
    // 匹配不到路由的时候加载的组件或者跳转的地址
    path: '**',
    redirectTo: 'home'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
// 这里不需要引入homeModule、ProductModule、NewsModule，点击路由的时候才加载这些模块，所以叫懒加载

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.html

<div class="content">
  <div class="left">
    <!--
      路由写法：[routerLink]="['/home/welcome']" === [routerLink]="['welcome']"
    -->
    <a [routerLink]="['welcome']" routerLinkActive="active">欢迎首页</a>
    <br>
    <br>
    <a [routerLink]="['/home/setting']" routerLinkActive="active">系统设置</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

home.component.css

.header  {
 height: 40px;
 background: black;
}
.header  a {
    padding: 0 50px;
    display: inline-block;
    color: #fff;
}
.header .active {
    color: red;
}

home下的index.ts
慕课网教程的写法，使用index.ts导出，引用方法为import { SettingComponent } from ‘./setting/index’;

export * from './home.module'
export * from './setting'
export * from './welcome'

home/setting/index.ts

export * from './setting.component'

home/welcome/index.ts

export * from './welcome.component'

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
// module文件必须引入路由模块
import { HomeRoutingModule } from './home-routing.module';
// module文件需要引入所有的commponent
import { SettingComponent } from './setting/index';
import { WelcomeComponent} from './welcome/index';

@NgModule({
    declarations: [
        // 用到的组件需要声明
        HomeComponent,
        SettingComponent,
        WelcomeComponent
    ],
    imports: [CommonModule, RouterModule, HomeRoutingModule],
    exports: [],
    providers: [],
})
export class HomeModule { }

home.routing-module.ts

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
import { SettingComponent } from './setting';
import { WelcomeComponent } from './welcome';

const routes: Routes = [
    {
        // 默认路由
        path: '',
        component: HomeComponent,
        children: [{
            path: '',
            component: WelcomeComponent,
        },{
            path: 'welcome',
            component: WelcomeComponent,
        }, {
            path: 'setting',
            component: SettingComponent
        }, ]
    },
    // {
    //     // 这样写就相当于把WelcomeComponent这个组件挂载到根路由app-routing.module
    //     path: 'welcome',
    //     component: WelcomeComponent
    // }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

当在浏览器输入http://localhost:4200/welcome就会跳转到welcome组件，相当于从根路由跳转，前提app.module.ts不写path: ‘**’,redirectTo: ‘home’

我出错的几个地方：

1. app.routing.module.ts中懒加载不需要引入组件
2. app.module.ts中不需要引入首页、产品、新闻模块
3. home.module.ts文件里需要引入home.routing.module.ts