Angular 2 모듈 게 으 름 피 우 는 방법

프로젝트 가 복잡 하고 방대 해 지면 모든 페이지 가 하나의 모듈 에 있 으 면 첫 페이지 로 딩 이 느 린 문제 가 발생 합 니 다.첫 페이지 가 전체 프로젝트 를 불 러 왔 기 때 문 입 니 다.따라서 Angular 2 가 필요 에 따라 불 러 와 사용자 체험 을 향상 시 킬 수 있 도록 업무 에 따라 다양한 기능 을 모듈 로 나 눌 필요 가 있다.
아래 의 예 는 홈 모듈 에 홈 페이지 를 넣 고/home 에 접근 할 때 홈 모듈 내용 을 불 러 오 는 것 입 니 다.게 으 름 만 배 울 수 있 습 니 다.사실 홈 페이지 방문 경 로 는/
프로젝트 파일 구조 먼저 보기:

홈 모듈 은 src/app/home 디 렉 터 리 에 넣 고 홈 디 렉 터 리 는 홈 구성 요소 입 니 다.
홈 모듈 은 단독 정의 와 경로(home.module.ts,home-routing.module.ts)가 있 습 니 다.
HOME 모듈 과 HOME 구성 요소 만 들 기:

cd src/app/
mkdir home
cd home
ng g module home
ng g component home

HOME 모듈 의 경로 설정 모듈 만 들 기
홈-routing.module.ts 만 들 기:

import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {NgModule} from "@angular/core";

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

@NgModule({
 imports:[RouterModule.forChild(routes)],
 exports:[RouterModule],
 providers:[]

})
export class HomeRoutingModule{}

모듈 아래 페이지 는 앱-routing.module.ts 에서 설정 하지 않 고 이 모듈 의 경로 설정 모듈 에 단독으로 설정 할 수 있 습 니 다.RouterModule.forChild(routes)에 주의 하 십시오.
home.module.ts 경로 모듈 가 져 오기:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import {HomeRoutingModule} from "./home-routing.module";

@NgModule({
 imports: [
  CommonModule,
  HomeRoutingModule
 ],
 declarations: [HomeComponent]
})
export class HomeModule { }

app-routing.module.ts 설정 경로:

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {UserListComponent} from "./user/user-list/user-list.component";
import {UserDetailComponent} from "./user/user-detail/user-detail.component";
import {RxjsComponent} from "./rxjs/rxjs.component";
import {UserEditComponent} from "./user/user-edit/user-edit.component";
import {environment} from "../environments/environment";

const routes: Routes = [
 {
  path:'home',
  loadChildren:'app/home/home.module#HomeModule'
 }

];

@NgModule({
 imports: [RouterModule.forRoot(routes,{ useHash: environment.useHash })],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule { }

홈 경 로 를 설정 하고 loadChildren 로 홈 모듈 을 불 러 옵 니 다.
완료 후 chrome 개발 자 도 구 를 열 고 Network 로 자 르 고 서로 다른 페이지 에 다른 파일 을 불 러 왔 는 지 확인 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.