angular的自定义模块及配置路由模块懒加载

自定义模块

使用命令行生成自定义模块：

ng g module module

生成自定义模块的根组件

ng g component module

其中module可以看作一个模块
module.module.ts为改模块的根。

在项目其他组件中引入自定义模块

在自定义项目中使用exports暴露需要在其他组件中引入的组件：

@NgModule({
  declarations: [UserComponent, AddressComponent, OrderComponent, ModuleComponent],
  imports: [
    CommonModule
  ],
  exports: [ ModuleComponent, UserComponent]
})

在根组件中引入：

import { ModuleModule } from './module/module.module';

// 在imports中引入：
imports: [
    BrowserModule,
    AppRoutingModule,
    ModuleModule
  ],

自定义模块配置路由懒加载

1.使用命令行生成自定义模块：

ng g module module/user --rouing

2.生成自定义模块的根组件：

ng g component module/user

3.在自定义模块的routing.module.ts中（）引入根组件：

import { UserComponent } from './user.component';

4.配置根组件的路由：

const routes: Routes = [
  {
    path: '', component: UserComponent
  },
]

5.在项目根组件的routing.module.ts中配置自定义模块的路由，这里不需要使用import引入组件：

const routes: Routes = [
  {
    path: 'user', loadChildren: './module/user/user.module#UserModule'
    // './module/user/user.module'为自定义组件根目录的路径；
    // #后面的名称是根组件user.module.ts中的类名：‘export class UserModule { }’
  },
]