1

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

  • 角度：4.4.4
  • 网络包：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回调中调用函数而不是传递函数。

4

1 回答 1

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

否则你会遇到这个错误：

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

于 2017-10-26T21:55:23.023 回答