Angular 中内置模块 以及 自定义模块

Angular 内置模块

Angular 自定义模块

当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项 目。并且通过 Angular 自定义模块可以实现路由的懒加载。

1、创建模块

ng g module module/user

2、创建组件

ng g component module/user 
ng g component module/user/components/order 

3.写法和app.module.ts的写法一模一样 如需要将自定义中的组件提供给其他模块使用 需将该组件暴露出去

 // 将组件暴露出去让其他模块可以使用
  exports:[OrderComponent]

4.在app.module.ts中引入自定义模块

//引入自定义模块
import { UserModule } from './module/user/user.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    UserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

1、创建带路由文件的模块

ng g module module/user --routing 
ng g module module/article --routing 
ng g module module/product --routing

2、创建组件

ng g component module/user 
ng g component module/user/components/profile 
ng g component module/user/components/order 
ng g component module/article 
ng g component module/article/components/articlelist 
ng g component module/article/components/info 
ng g component module/product 
ng g component module/product/components/plist 
ng g component module/product/components/pinfo

3.写法和app.module.ts的写法一模一样 如需要将自定义中的组件提供给其他模块使用 需将该组件暴露出去

 // 将组件暴露出去让其他模块可以使用
  exports:[AddressComponent]

4.配置懒加载

user模块的路由文件 user-routing.module编写

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';
import { TelComponent } from './components/tel/tel.component';
import { AddressComponent } from './components/address/address.component';
const routes: Routes = [
  {path:'',component:UserComponent},
  {path:'tel',component:TelComponent},
  {path:'address',component:AddressComponent}
  
];

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

app-routing.module配置路由实现懒加载模块

import { HomeComponent } from './components/home/home.component'; 
const routes: Routes = [ 
{ path:'',component : HomeComponent },
{ path:'user', loadChildren: () => import('./module/user/user.module').then(m => m.UserModule) } 
];