Angular HMR(핫 모듈 교체) 기능 구현 방법

이 글은 주로 Angular HMR(핫 모듈 교체) 기능의 구현 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유해 보겠습니다.

최근 동료가 Angular를 사용하면서 VUE와 같은 기능을 원했는데, 코드를 수정해도 브라우저가 새로 고침되지 않고 수정된 구성 요소에 따라 페이지가 자동으로 업데이트됩니다. 이 기능의 이름은 HMR(hot module replacement)입니다.

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

environment.ts의 hmr이 true로 설정된 경우 ng Serve --hmr은 같은 효과. 하지만 핫 교체 기능에 대해서는 그다지 확신이 없어서 환경을 새로 고치면 환경이 더 깨끗해질 수 있습니다.

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

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

5 srchmr.ts 파일을 생성합니다. 내용은 다음과 같습니다.
# 🎜🎜#

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

이것이 핫 교체의 핵심입니다. hmrBootstrap은 원래 부트스트랩을 교체하고(아래 참조) 나중에 새 모듈이 있으면 교체합니다. 업데이트되면 HMR은 먼저 기존 모듈을 제거한 다음 새 모듈을 받습니다. 이 모든 일은 브라우저에서 발생합니다. 따라서 페이지가 새로 고쳐지지 않습니다.

6. srcmain.ts 파일을 다음과 같이 업데이트합니다.

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

#🎜 🎜# 여기를 바꾸려면 파일을 시작해야 합니다. hmr로 설정된 경우 hmrBootStrap을 호출하여 웹 페이지를 시작하고, 그렇지 않으면 과거

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

Angularjs의 $apply 및 최적화 사용 정보

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