Angular는 HMR 코드 구문 분석을 사용합니다.

이번에는 Angular의 HMR 코드 분석 활용에 대해 소개해 드리겠습니다. Angular의 HMR 코드 분석 활용 시 주의사항은 무엇인가요?

약간 조사한 결과,Angular/cli로 만든 프로젝트에서 이를 구현하는 것이 그리 어렵지 않다는 것을 알았습니다. 단계는 다음과 같습니다.

1 먼저 src/environments/environment.hmr.ts 파일을 만듭니다. 다음 내용이 포함되어 있습니다

export const environment = {
 production: false,
 hmr: true
};

물론 해당 환경.prod.ts 및 환경.ts에는 hmr을 추가해야 합니다. false.

environment.ts의 hmr이 true로 설정된 경우 ng Serve --hmr은 같은 효과. 하지만 핫 교체 기능에 대해서는 그다지 확신이 없습니다. 브라우저를 새로 고치면 더 깨끗한 상태가 보장될 수 있으므로, Environment.ts에서 hmr을 false로 설정했습니다.

2.angular-cli.json 환경에 hmr을 추가합니다. file 환경은 대략 다음과 같습니다.

"environments": {
 ...
 "hmr": "environments/environment.hmr.ts",
}

3 package.json의 스크립트에 새 명령을 추가합니다. (물론 추가하지 않고 직접 실행할 수도 있습니다. 이는 npm run hmr을 실행하는 것과 동일한 효과가 있습니다.)

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=hmr"
}

4 hmr 모듈을 설치합니다. 명령은 다음과 같습니다.

npm install --save-dev @angularclass/hmr

5. 다음과 같이 srchmr.ts 파일을 생성합니다.

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(currentModule => ngModule = currentModule);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const removeOldHosts = createNewHosts(elements);
  ngModule.destroy();
  removeOldHosts();
 });
};

이것이 핫 교체의 핵심입니다(아래 참조). 교체 후 새 모듈이 업데이트됩니다. hmr은 먼저 기존 모듈을 제거한 다음 새 모듈을 받습니다. 이 모든 일은 브라우저에서 발생합니다. 따라서 페이지가 새로 고쳐지지 않습니다.

6. srcmain.ts 파일을 다음과 같이 업데이트하세요.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
 enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error('Ammm.. HMR is not enabled for webpack');
 }
} else {
 bootstrap();
}

여기에서 시작 파일을 바꿔야 합니다. hmr로 설정된 경우 hmrBootStrap을 호출하여 웹 페이지를 시작하고, 그렇지 않으면 과거를 사용하세요.

믿습니다. 이 기사의 사례를 읽은 후 방법을 마스터했습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS는 createElement()를 사용하여 HTML

vue-infinite-loading을 동적으로 추가하여 무한 로딩 효과를 만듭니다

위 내용은 Angular는 HMR 코드 구문 분석을 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!