Angular

Question

在我的应用程序中，一个配置对象从 window 注入到 Angular 应用程序。为此，我按照以下思路开发了一些东西：

代码

表示配置的型号

export class AppConfig {
    constructor(
        public apiKey: string,
        public username: string,
        public languageCode: string
    ) { }
}

正在创建一个 InjectionToken

import { InjectionToken } from '@angular/core';

import { AppConfig } from './shared';

export let APP_CONFIG = new InjectionToken<AppConfig>('appConfig');

然后在AppModule中提供

import { APP_CONFIG } from './app-config-export';
....
@NgModule({
    ....
    { provide: APP_CONFIG, useValue: (window as any).appConfig }
})

export class AppModule { }

最后在组件中注入

import { AppConfig } from '../shared';
import { APP_CONFIG} from './app-config-export';

....

export class AppComponent implements OnInit {
     constructor(
         @Inject(APP_CONFIG) private appConfig: any,
         private appService: AppService
     ) { }

     ngOnInit() {
         this.appService.initApp(this.appConfig);
     }
}

AOT编译

这工作正常，但现在我一直在尝试使用 AOT 编译来构建应用程序。当我运行带有AOT的应用程序时，appConfig总是null。我猜这与我注入可能与 AOT 不兼容的配置的方式有关。有没有办法让它与 AOT 一起工作？

我在 github https://github.com/angular/angular/issues/19154 上找到了这个帖子，但是我不明白 "use a factory instead" 的意思。

Angular: 4.4.4
Webpack: 3.8.1

更新

我已经像这样更新了 AppModule：

import { APP_CONFIG } from './app-config-export';
....

export function appConfigFactory() {
    return (window as any).appConfig;
}

@NgModule({
    ....
    { provide: APP_CONFIG, useFactory: appConfigFactory() }
})

export class AppModule { }

解决方案

我已经像这样更新了 AppModule：

import { APP_CONFIG } from './app-config-export';
....

export function appConfigFactory() {
    return (window as any).appConfig;
}

@NgModule({
    ....
    { provide: APP_CONFIG, useFactory: appConfigFactory }
})

export class AppModule { }

我在 useFactory 回调中调用函数而不是传递函数。

Answer 1

@Pankaj Parkar 的解决方案几乎是正确的，但您还需要导出 useFactory 回调以允许 AoT：

import { APP_CONFIG } from './app-config-export';

export function configFactory() {
  return (window as any).appConfig;
}

@NgModule({
  providers: {
    provide: APP_CONFIG,
    useFactory: configFactory,
  }
})

否则你会运行进入这个错误：

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function...

Angular - InjectionToken 可以与 AOT 编译一起使用吗？

Angular - Can InjectionToken be used with AOT Compilation?

angular-aot