이 글은 주로 Angular HMR(핫 모듈 교체) 기능의 구현 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유해 보겠습니다.
최근 동료가 Angular를 사용하면서 VUE와 같은 기능을 원했는데, 코드를 수정해도 브라우저가 새로 고침되지 않고 수정된 구성 요소에 따라 페이지가 자동으로 업데이트됩니다. 이 기능의 이름은 HMR(hot module replacement)입니다.
약간의 조사 끝에 각도/cli로 만든 프로젝트에서 이를 구현하는 것이 그리 어렵지 않다는 것을 알았습니다. 단계는 다음과 같습니다.
#🎜🎜 #1. 먼저 src/environments/environment.hmr.ts 파일을 생성합니다. 내용은 다음과 같습니다. # 물론, 해당 환경.prod.ts 및 Environment.ts에는 hmr:false를 추가해야 합니다.
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을 실행하면 핫 교체 기능이 실현됩니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항:Angularjs의 $apply 및 최적화 사용 정보
위 내용은 Angular HMR(핫 모듈 교체) 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!