模块

  1. ng g module module/about         //创建模块about.module.ts
  2. ng g component module/about      //在module中创建组件，自动注册在about.module.ts中
  3. ng g component module/about/components/file     //自动注册在about.module.ts中
  1. exports:[
  2.     AboutComponent
  3.   ]
  1. import {AboutModule} from './module/about/about.module'
  2.  imports: [
  3.     AboutModule
  4.   ],

路由模块步骤

1 配置路由模块

  1. ng g module views/home --routing     //路由模块
  2. ng g component views/home           //配置主组件，自动注册在home.module.ts

2 配置模块中的路由

//home-routing.module.ts

  1. import { HomeComponent } from './home.component';
  2. const routes: Routes = [
  3.   {
  4.     path:'',
  5.     component:HomeComponent
  6.   }
  7. ];

3 配置主路由

//app-routing.module.ts

  1. const routes: Routes = [
  2.   {
  3.     path:"home",
  4.     loadChildren:()=>import('./views/home/home.module').then(m=>m.HomeModule)
  5.   }
  6. ];

在模块下创建组件，只能在home模块中使用，可以使用图形画界面创建组件，需要手动引入

  1. ng g component views/home/components/hello   //自动挂载在home.module.ts中