상세 한 설명 사용 경로 지연 로드 Angular 모듈

Angular 는 매우 모듈 화 되 어 있 으 며,모듈 화 된 매우 유용 한 특성 중 하 나 는 모듈 이 로드 지연 점 으로 하 는 것 이다.로드 지연 은 배경 에 모듈 과 포 함 된 모든 구성 요소 등 자원 을 불 러 올 수 있 음 을 의미 합 니 다.이렇게 하면 Angular 는 첫 번 째 인터페이스 에서 서버 에서 모든 파일 을 다운로드 할 필요 가 없습니다.요청 할 때 까지 해당 모듈 을 다운로드 할 수 있 습 니 다.이것 은 성능 을 제공 하고 첫 화면의 초기 다운로드 파일 사 이 즈 를 줄 이 는 데 큰 도움 이 된다.그리고 쉽게 설정 할 수 있 습 니 다.
이 기능 이 어떻게 작 동 하 는 지 간단 한 예 시 를 사용 할 것 이다.응용 프로그램 을 여러 개의 서로 다른 모듈 로 나 누 어 필요 할 때 로드 지연 을 할 수 있 습 니 다.
로드 지연 루트 는 루트 모듈 밖에서 정의 해 야 하기 때문에 로드 지연 이 필요 한 기능 을 기능 모듈 에 포함 시 켜 야 합 니 다.
우 리 는 데모 항목 을 만 들 기 위해Angular CLI를 사용 합 니 다:데모.

ng new demo

그리고 demo 폴 더 에 들 어 갑 니 다.필요 한 패 키 지 를 설치 하 다.

npm i

설치 한 후에 우 리 는 새로운 모듈 shop 을 만 들 었 다.angular CLI 에서 ng 은 명령 알림 명령 입 니 다.g 는 generate 를 표시 하여 새로운 아 이 템 을 만 드 는 데 사 용 됩 니 다.
새로운 shop 라 는 모듈 을 만 드 는 것 은:

ng g module shop

이 로 인해 Angular 프로젝트 의 src/app 파일 에 새 폴 더 를 만 들 고 shop.module.ts 라 는 모듈 정의 파일 을 추가 할 수 있 습 니 다.
그리고 우 리 는 기본 app 모듈 과 새로 만 든 shop 모듈 에서 각각 구성 요 소 를 만 듭 니 다.

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

CLI 는 home 을 app 모듈 에 배정 하고 cart,checkout,confirm 을 shop 모듈 에 배정 합 니 다.예 를 들 어,
이때 shop.module.ts 내용 은 다음 과 같 습 니 다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

루트 구성 요소 수정
Angular CLI 에서 기본적으로 생 성 된 app.coponent.ts 구성 요 소 는 응용 홈 페이지 입 니 다.Angular 에 대한 소개 정 보 를 포함 하고 있 습 니 다.우 리 는 그것 을 우리 가 필요 로 하 는 내용 으로 수정 합 니 다.기본 으로 생 성 된 app.coponent.html 내용 을 다음 과 같이 수정 합 니 다.

<!--The content below is only a placeholder and can be replaced.-->
<h1>Lazy Load Module</h1>
<a [routerLink]="['/shop']" >Shop Cart</a>
<router-outlet>
</router-outlet>

위 치 를 차지 하 는 router-outlet 을 제공 합 니 다.각 구성 요 소 는 이 안에 표 시 됩 니 다.
또한 내 비게 이 션 링크 를 제공 하여/shop/cart 구성 요소 로 직접 내 비게 이 션 할 수 있 습 니 다.
경로 만 들 기
루트 루트
우선 루트 를 만 듭 니 다.
app 폴 더 에 main.routing.ts 라 는 경로 설정 파일 을 추가 합 니 다.내용 은 다음 과 같다.

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
  { path: '**', component: HomeComponent }
];

그 중에서 홈 구성 요 소 는 정상적으로 미리 불 러 옵 니 다.
주의해 야 할 것 은 몇 시 입 니까?
1.우 리 는 모듈 로드 를 지연 시 키 기 위해 loadChildren 을 사용 했다.사용 하 는 component 를 미리 불 러 오 는 것 이 아 닙 니 다.
2.우 리 는 미리 불 러 오 는 것 을 피하 기 위해 기호 가 아 닌 문자열 을 사용 했다.
3.우 리 는 모듈 의 경 로 를 정 의 했 을 뿐만 아니 라 모듈 의 유형 도 제공 했다.
app.module.ts 에서 루트 를 사용 합 니 다.루트 를 사용 하려 면 forRoot 를 사용 해 야 합 니 다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

모듈 경로
정의 모듈 경로
shop 모듈 에 있어 서 경로 정의 에 특별한 것 이 없습니다.shop.route.ts 라 는 경로 정의 파일 을 정의 할 수 있 습 니 다.내용 은 다음 과 같 습 니 다.

import { Routes } from '@angular/router'; 
import { CartComponent } from './cart/cart.component'; 
import { CheckoutComponent } from './checkout/checkout.component'; 
import { ConfirmComponent } from './confirm/confirm.component'; 
export const routes: Routes = [   
     { path: '', component: CartComponent },   
     { path: 'checkout', component: CheckoutComponent },  
     { path: 'confirm', component: ConfirmComponent } 
];

이 루트 정 의 를 사용 하기 위해 모듈 정의 파일 shop.module.ts 파일 을 수정 해 야 합 니 다.하위 루트 를 사용 하려 면 forChild 를 사용 해 야 합 니 다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

import { routes } from './shop.routing'; 
import { RouterModule } from '@angular/router';

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

이미 모든 것 이 준비 되 었 다.
테스트 지연 로드
지금 응용 프로그램 을 시작 합 니 다.

ng serve

기본 값 은 4200 포트 에서 시작 합 니 다.브 라 우 저 를 열 고 접근 하 십시오.http://localhost:4200/
첫 페이지 에 접근 하 는 네트워크 는 다음 과 같 습 니 다.기능 모듈 의 내용 은 포함 되 어 있 지 않 습 니 다.

우 리 는 먼저 네트워크 가 요청 한 기록 을 지 웠 다.
그리고 링크 를 클릭 하여/shop/cart 에 접근 할 때 네트워크 요청 은 다음 과 같 습 니 다.새로운 스 크 립 트 파일 이 불 러 오 는 것 을 볼 수 있 습 니 다.여기 에는 로드 지연 기능 모듈 이 포함 되 어 있 습 니 다.

기능 모듈 만 불 러 왔 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.