带有 AOT 的 Angular 4 注入控制台答案

【问题标题】：Angular 4 inject console with AOT带有 AOT 的 Angular 4 注入控制台
【发布时间】：2017-10-20 16:49:01
【问题描述】：

此代码在使用 Ahead of time 编译的开发模式下失败。

export function loggerFactory(console, http, device, injector) {
  return environment.production ?
         new LogstashLoggerService(device, injector, http) :
         new ConsoleLoggerService(console);
};

let consoleObj = window.console;

@NgModule({
  imports: [],
  exports: [],
  declarations: [],
  providers: [],
})
export class LoggerModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LoggerModule,
      providers: [
        {provide: CONSOLE, useValue: consoleObj},
        {
          provide: Logger,
          useFactory: loggerFactory,
          deps: [CONSOLE, HttpInterceptor, DeviceService, Injector]
        }
      ]
    };
  }
}

如何注入控制台？

【问题讨论】：

window is undefined when used as useValue provider with Angular 4 AoT的可能重复

标签： angular angular-aot angular-di

【解决方案1】：

您必须使用useFactory 来处理您想为 AOT 注入的任何内容。查看粗斜体的变化。我添加了一个名为“Console”的注入工厂。

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

export function loggerFactory(@Inject('Console') console, http, device, injector) {
  return environment.production ?
         new LogstashLoggerService(device, injector, http) :
         new ConsoleLoggerService(console);
};


export function consoleFactory(): any {
    return console;
}


@NgModule({
  imports: [],
  exports: [],
  declarations: [],
  providers: [],
})
export class LoggerModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LoggerModule,
      providers: [
        { provide: 'Console', useFactory: consoleFactory },
        {
          provide: Logger,
          useFactory: loggerFactory,
          deps: [CONSOLE, HttpInterceptor, DeviceService, Injector]
        }
      ]
    };
  }
}

【讨论】：