更新Angular后出现HMR问题 [英] Hmr issues after update Angular

问题描述

我正在使用一些旧代码，因此决定将其更新为Angular9.我已经解决了大多数其他问题，但是我因某些HMR代码而陷入这种错误.

I'm working with some legacy code, and I decided to update it to Angular 9. I've resolved most of the other issues, but i'm stuck on this error throw by some HMR code.

 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并重新安装，将[nodes]添加到类型中，或更改tsconfig中{环境}的导入，但是所有这些似乎都是正确的，所以我不完全确定为什么可以这样做'找不到模块.该代码在Angular 5.2中有效，并且在使用过程中一定搞砸了.

It says that module type cannot be found. The other answers I've found say delete all your nodule_modules and reinstall, add [nodes] to types, or change import of { environments } in tsconfig, but all of these seem correct, so I'm not entirely sure why it can't find module. This code was working in Angular 5.2 and must have gotten messed up along the way.

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

I've scanned through some files and this is what I've found

• 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"
  ]
}

我在这个问题上已经有一段时间了，因此我们将不胜感激任何帮助.谢谢！

I've been on this issue for a while so any help would be gratly appreciated. Thanks!

推荐答案

您的tsconfig.app.json文件中有错字.要添加的正确类型是node而不是nodes:

You have a typo in your tsconfig.app.json file. The correct type to add is node and not nodes:

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

这篇关于更新Angular后出现HMR问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！