Angular의 HMR 기능 구현 방법

이번에는 Angular의 HMR 기능 구현 방법을 보여드리겠습니다. Angular의 HMR 기능 구현 시 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다. 최근 동료가 Angular를 사용하면서 VUE와 같은 기능을 원했는데, 코드를 수정한 후에도 브라우저가 새로고침되지 않고 수정된 구성요소에 따라 페이지가 자동으로

업데이트

되는 기능이었습니다. 이 기능의 이름은 HMR(hot module replacement)입니다. 약간 조사한 결과,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. json 파일 대략 다음과 같이 hmr 환경을 추가합니다.

"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을 호출하여 웹 페이지를 시작하세요. 그렇지 않으면 과거

7을 사용하세요. 이제 npm run hmr 또는 ng Serve --hmr -e=hmr을 실행하면 핫 교체 기능이 실현됩니다.

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

추천 도서:

express의 기본 로그 구성 요소 morgan에 대한 자세한 소개

webpack의 핫 모듈 교체 HMR/핫 업데이트의 구체적인 단계

위 내용은 Angular의 HMR 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!