Angular 角度HMR：类型'；无效'；不可分配给类型'；NgModuleRef<；任何>'；

我最近更新了typescript，在我的应用程序的main.ts上出现了以下错误——它以前从未出现过问题——它负责在我们的应用程序中重新部署热模块

ERROR in /Users/istobarton/code/studio-full-stack/studio-full-stack/studio-ui/src/main.ts (40,28): Argument of type '() => Promise<void | NgModuleRef<any>>' is not assignable to parameter of type '() => Promise<NgModuleRef<any>>'.
  Type 'Promise<void | NgModuleRef<any>>' is not assignable to type 'Promise<NgModuleRef<any>>'.
    Type 'void | NgModuleRef<any>' is not assignable to type 'NgModuleRef<any>'.
      Type 'void' is not assignable to type 'NgModuleRef<any>'.

它的应用程序如下：

hmr.ts

if (environment.hmr) {
  if (module[ 'hot' ]) {
    if(bootstrap){
      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();
}

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => {
    const data = module.hot.data || {};
    ngModule = mod;
    ngModule.instance.hmrOnInit(ngModule, data);
  });
  module.hot.dispose((data) => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.instance.hmrOnDestroy(ngModule, data);
    ngModule.destroy();
    ngModule.instance.hmrAfterDestroy(ngModule, data);
    makeVisible();
  });
};

const bootstrap = () => {
  // Get translation provider and then bootstrap
  return getTranslationProviders().then(
    (providers) => {
      const options = { providers };

      return platformBrowserDynamic()
        .bootstrapModule(AppModule, options)
        .then(decorateModuleRef)
        .catch((err) => console.error(err));
    });
};

export const decorateModuleRef = (modRef: NgModuleRef<any>) => {
  const appRef = modRef.injector.get(ApplicationRef);
  const cmpRef = appRef.components[0];

  const _ng = (<any> window).ng;
  enableDebugTools(cmpRef);
  (<any> window).ng.probe = _ng.probe;
  (<any> window).ng.coreTokens = _ng.coreTokens;
  return modRef;
};

export function getTranslationProviders(): Promise<Object[]> {
  // Get the locale id from the global
  let locale = document['locale'] as string;

  // return no providers if fail to get translation file for locale
  const noProviders: Object[] = [];

  // No locale
  if (!locale) {
    locale = navigator.languages
      ? navigator.languages[0]
      : (navigator.language || navigator.userLanguage);
  }

  return getTranslationFilesWithWebpack(locale)
    .then((translations: string) => [
      {provide: TRANSLATIONS, useValue: translations},
      {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
      {provide: LOCALE_ID, useValue: locale}
    ])
    .catch(() => noProviders); // ignore if file not found
}

当然，其中一个函数调用返回void，对吗

环境。ts

if (environment.hmr) {
  if (module[ 'hot' ]) {
    if(bootstrap){
      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();
}

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => {
    const data = module.hot.data || {};
    ngModule = mod;
    ngModule.instance.hmrOnInit(ngModule, data);
  });
  module.hot.dispose((data) => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.instance.hmrOnDestroy(ngModule, data);
    ngModule.destroy();
    ngModule.instance.hmrAfterDestroy(ngModule, data);
    makeVisible();
  });
};

const bootstrap = () => {
  // Get translation provider and then bootstrap
  return getTranslationProviders().then(
    (providers) => {
      const options = { providers };

      return platformBrowserDynamic()
        .bootstrapModule(AppModule, options)
        .then(decorateModuleRef)
        .catch((err) => console.error(err));
    });
};

export const decorateModuleRef = (modRef: NgModuleRef<any>) => {
  const appRef = modRef.injector.get(ApplicationRef);
  const cmpRef = appRef.components[0];

  const _ng = (<any> window).ng;
  enableDebugTools(cmpRef);
  (<any> window).ng.probe = _ng.probe;
  (<any> window).ng.coreTokens = _ng.coreTokens;
  return modRef;
};

export function getTranslationProviders(): Promise<Object[]> {
  // Get the locale id from the global
  let locale = document['locale'] as string;

  // return no providers if fail to get translation file for locale
  const noProviders: Object[] = [];

  // No locale
  if (!locale) {
    locale = navigator.languages
      ? navigator.languages[0]
      : (navigator.language || navigator.userLanguage);
  }

  return getTranslationFilesWithWebpack(locale)
    .then((translations: string) => [
      {provide: TRANSLATIONS, useValue: translations},
      {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
      {provide: LOCALE_ID, useValue: locale}
    ])
    .catch(() => noProviders); // ignore if file not found
}

export const decorateModuleRef=（modRef:NgModuleRef）=>{
常量appRef=modRef.injector.get（ApplicationRef）；
常数cmpRef=appRef.components[0]；
常数ng=（窗口）.ng；
启用调试工具（cmpRef）；
（窗口）.ng.probe=\u ng.probe；
（窗口）.ng.coretokes=\u ng.coretokes；
返回modRef；
};

i18n.providers.ts

if (environment.hmr) {
  if (module[ 'hot' ]) {
    if(bootstrap){
      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();
}

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => {
    const data = module.hot.data || {};
    ngModule = mod;
    ngModule.instance.hmrOnInit(ngModule, data);
  });
  module.hot.dispose((data) => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.instance.hmrOnDestroy(ngModule, data);
    ngModule.destroy();
    ngModule.instance.hmrAfterDestroy(ngModule, data);
    makeVisible();
  });
};

const bootstrap = () => {
  // Get translation provider and then bootstrap
  return getTranslationProviders().then(
    (providers) => {
      const options = { providers };

      return platformBrowserDynamic()
        .bootstrapModule(AppModule, options)
        .then(decorateModuleRef)
        .catch((err) => console.error(err));
    });
};

export const decorateModuleRef = (modRef: NgModuleRef<any>) => {
  const appRef = modRef.injector.get(ApplicationRef);
  const cmpRef = appRef.components[0];

  const _ng = (<any> window).ng;
  enableDebugTools(cmpRef);
  (<any> window).ng.probe = _ng.probe;
  (<any> window).ng.coreTokens = _ng.coreTokens;
  return modRef;
};

export function getTranslationProviders(): Promise<Object[]> {
  // Get the locale id from the global
  let locale = document['locale'] as string;

  // return no providers if fail to get translation file for locale
  const noProviders: Object[] = [];

  // No locale
  if (!locale) {
    locale = navigator.languages
      ? navigator.languages[0]
      : (navigator.language || navigator.userLanguage);
  }

  return getTranslationFilesWithWebpack(locale)
    .then((translations: string) => [
      {provide: TRANSLATIONS, useValue: translations},
      {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
      {provide: LOCALE_ID, useValue: locale}
    ])
    .catch(() => noProviders); // ignore if file not found
}

导出函数getTranslationProviders（）：Promise{ //从全局数据库中获取区域设置id 让locale=document['locale']作为字符串； //如果无法获取区域设置的翻译文件，则不返回任何提供程序 const noProviders:Object[]=[]； //无区域设置 如果（！区域设置）{ locale=navigator.languages ？navigator.languages[0] ：（navigator.language | navigator.userLanguage）； } 返回GetTranslationFileWithWebPack（区域设置） 。然后（（翻译：字符串）=>[ {提供：翻译，使用值：翻译}， {提供：翻译\u格式，useValue:'xlf'}， {提供：LOCALE\u ID，useValue:LOCALE} ]) .catch（（）=>noProviders）；//如果找不到文件，则忽略 }

---

有人能帮忙吗？我快发疯了。

我刚刚遇到了这个问题，我找到了适合我的东西。在缓存引导程序时，在我的

main.ts

文件中，我有以下

.catch（err=>console.log（err））

。一旦我去掉这个，它就工作了。我的引导现在看起来像这样

const bootstrap=（）=>platformBrowserDynamic（providers）@davidele:应该作为答案发布。我刚才帮了我。