要将父组件和子组件作为默认路由进行懒加载,需要进行以下步骤:
npm install -g @angular/cli
ng new lazy-loading-app
cd lazy-loading-app
ng generate component parent
ng generate component child
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildComponent } from './child/child.component';
const routes: Routes = [
{ path: '', component: ChildComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChildRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParentComponent } from './parent.component';
import { ParentRoutingModule } from './parent-routing.module';
@NgModule({
declarations: [ParentComponent],
imports: [
CommonModule,
ParentRoutingModule
]
})
export class ParentModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent } from './child.component';
import { ChildRoutingModule } from './child-routing.module';
@NgModule({
declarations: [ChildComponent],
imports: [
CommonModule,
ChildRoutingModule
]
})
export class ChildModule { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule) }
];
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng serve --open
现在,当你在浏览器中访问应用程序时,默认会加载父组件和子组件。