更新角后的Hmr问题

Question

我正在处理一些遗留代码，我决定将其更新为角9。我已经解决了大多数其他问题，但我仍然被一些HMR代码抛出的错误所困扰。

 src/main.ts:16:7 - error TS2591: Cannot find name 'module'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

16   if (module['hot']) {
         ~~~~~~
src/main.ts:17:18 - error TS2591: Cannot find name 'module'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

17     hmrBootstrap(module, bootstrap);

它说找不到模块类型。我找到的其他答案是:删除所有的nodule_modules并重新安装，将节点添加到类型中，或者更改tsconfig中{ environments }的导入，但所有这些似乎都是正确的，因此我不完全确定为什么它找不到模块。这段代码的角度是5.2，一定是一路上搞砸了。

我已经扫描了一些文件，这就是我发现的

• main.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("HMR is not enabled for webpack-dev-server!");
    console.log("Are you using the --hmr flag for ng serve?");
  }
} else {
  bootstrap();
}

• 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();
  });
};

• tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "nodes"
    ]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

我在这个问题上已经有一段时间了，所以如果能提供任何帮助，我们将不胜感激。谢谢!

Answer 1

您的tsconfig.app.json文件中有一个错误。要添加的正确类型是node而不是nodes。

{
  ...
  "types": [
    "node"
  ]
  ...

Answer 2

认为这将通过在tsconfig.app.json文件部分中添加对您的文件的引用来解决。指向您的typings.d.ts文件。

E.g

"files": [
    "typings.d.ts",

这是因为在角9更新中

...updated tsconfig.app.json来限制编译的文件。如果您依赖于编译中包含的其他文件，如typings.d.ts文件，则需要手动将其添加到编译.

中。