角度 11 中的热模块更换

Question

我在工作中打开了一个 angular 10 项目。 过了一会儿，当我看到 HMR 添加到 angular 11 时，我通过尝试使用 HMR 升级了项目。 既然没有，我打开了一个全新的 Angular 项目。检查 HMR 是否正常工作。我移动了所有组件、服务、模块、样式（当然没有节点文件夹）并使用ng serve --hmr 启动它，但它再次无法工作。页面正在刷新。

我在这两天。任何想法将不胜感激？谢谢你。 我的 JSON 包是：

{
  "name": "date-manager-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.4",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler-cli": "~11.2.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

更新：我打开了一个新的品牌 Angular 11 项目，使用 --hmr 运行。 我在 AppComponent 的 ngOnInit 上写了 alert()。 我看到每次保存时都会调用 ngOnInit（弹出警报）。 因此，将执行所有代码、ajax 调用。 hmr 不应该绕过它吗？ 如果 ngOnInit 下的所有代码都执行了，那么 hmr 有什么帮助。我在这里错过了什么？

export class AppComponent {
  title = 'AppTest';

  ngOnInit(): void {
    alert();
  }
}

Answer 1

让我们一步一步来。

1. 安装所需的 hmr angular 包。

   npm install @angularclass/hmr --save-dev
   

2. 在 src/environments 文件夹中添加一个名为 environment.hmr.ts 的新环境文件

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

3. 更新 angular.json 中的“构建”和“服务”属性

    "build": {
      "configurations": {
         //
        "hmr": {
           "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.hmr.ts"
            }
           ]
        }
        //
      }
    }
   
    "serve": {
        "configurations": {
            //
            "hmr": {
               "hmr": true,
               "browserTarget": "date-manager-ui:build:hmr"
            }
            //
        }
    }
   

4. 在 src/tsconfig.app.json 文件的 compilerOptions 中的 types 数组中添加“node”。

   {
     //
     "compilerOptions": {
        //
        "types": ["node"]
     }
     //
   }
   

5. 现在我们需要在除了新添加的 environment.hmr.ts 文件之外的所有其他环境文件中添加值为 'false' 的 hmr 属性

   export const environment = {
     //
     hmr: false
   }
   

6. 让我们通过在 src 文件夹中创建一个名为 hmr.ts 的新文件并最后更新 main.ts 文件来配置我们的应用以使用 hmr。

   //hmr.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(mod => (ngModule = mod))
   module.hot.dispose(() => {
   const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef)
   const elements = appRef.components.map(c => c.location.nativeElement)
   const makeVisible = createNewHosts(elements)
   ngModule.destroy()
   makeVisible()
   })
   }
   
   //main.ts
   import { enableProdMode } from '@angular/core'
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
   import { environment } from './environments/environment'
   import { hmrBootstrap } from './hmr'
   import { RootModule } from './app/root/root.module'
   
   if (environment.production) {
     enableProdMode()
   }
   
   const bootstrap = () => platformBrowserDynamic().bootstrapModule(RootModule)
   
   if (environment.hmr) {
     if (module['hot']) {
        hmrBootstrap(module, bootstrap)
     } else {
       console.error('HMR is not enabled for webpack-dev-server!')
       console.log('Are you using the --hmr flag for ng serve?')
     }
   } else {
     bootstrap().catch(err => console.log(err))
   }
   

7. 最后一步。在 package.json 文件的 scripts 对象中添加 hmr 属性，使运行应用更容易。

   "scripts": {
     //
     "hmr": "ng serve --configuration hmr"
   }
   

Answer 2

今天更新到 Angular 12。 hmr 开始工作了。