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) }
];