Hmr выдает после обновления Angular - PullRequest
Новая
       38

Hmr выдает после обновления Angular

1 голос
/ 25 февраля 2020

Я работаю с некоторым устаревшим кодом, и я решил обновить его до Angular 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 и переустановите, добавьте [node] к типам или измените импорт {environment} в tsconfig, но все они кажутся правильными, поэтому я не совсем уверен, почему это возможно ' найти модуль. Этот код работал в Angular 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"
  ]
}

Я уже давно занимаюсь этим вопросом, поэтому любая помощь будет с благодарностью. Спасибо!

Ответы [ 2 ]

1 голос
/ 17 марта 2020

В вашем файле tsconfig.app.json есть опечатка. Правильный тип для добавления - node, а не nodes: 

{
  ...
  "types": [
    "node"
  ]
  ...
0 голосов
/ 09 марта 2020

Думаю, что это будет исправлено добавлением ссылки на файл tsconfig.app. json в разделе files . Указывает на файл typings.d.ts .

Например 

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

Это потому, что в обновлении Angular 9 они имеют

... обновил tsconfig.app. json, чтобы ограничить количество скомпилированных файлов. Если вы полагаетесь на другие файлы, включенные в компиляцию, такие как файл typings.d.ts, вам необходимо вручную добавить его в компиляцию.

...