Question

在我的应用程序中，一个从窗口注入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上发现了这个帖子，但是我不明白“使用工厂”是什么意思。

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的解决方案几乎是正确的，但您还需要导出.st_dev回调以允许AoT：

useFactory

否则您将遇到此错误：

错误中的错误：静态解析符号值时出错。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda ...

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

1 个答案: