角度HMR:类型&#39; void&#39;不能分配给&#39; NgModuleRef <any>&#39;

时间:2017-10-18 18:58:19

标签: angular 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>'.

很酷,所以在&#34; hmrBootstrap(模块,引导程序)&#34;的调用之间明显存在类型错误。这里:

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

它的应用程序在这里:

hmr.ts

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

所以,我正在研究bootstrap的实现:

main.ts

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

当然,其中一个函数调用返回无效,对吧?

environment.ts

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;
};

i18n.providers.ts

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
}

有人可以帮忙吗?我失去了理智。

0 个答案:

没有答案