angular - Angular 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”和“serve”属性

    "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 的类型数组中添加 'node'。

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

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

   export const environment = {
     //
     hmr: false
   }
   

6. 让我们配置我们的应用程序以使用 hmr，方法是在 src 文件夹中创建一个名为 hmr.ts 的新文件，最后更新 main.ts 文件。

   //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"
   }