Angular 4.x - 不支持函数调用。考虑将函数或 lambda 替换为对导出函数的引用

Question

我正在尝试通过使用静态 forRoot() 来提供一种自定义服务的方法，但是...

我收到以下错误 - 即使我已导出 menuServiceFactory 函数以用作工厂。
我也尝试将其导出为 const 值。

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

相关代码-

import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenuComponent } from './menu.component';
import { MenuService } from './menu.service';
import { MdMenuModule, MdToolbarModule, MdButtonModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { SecurityModule, SecurityService } from '@savantly/ngx-security';

@NgModule({
  imports: [
    CommonModule,
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule, SecurityModule
  ],
  exports: [
    CommonModule,
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule,
    SecurityModule,
    MenuComponent],
  declarations: [MenuComponent],
  providers: []
})
export class MenuModule {

  static forRoot(options?: any): ModuleWithProviders {
    if (options && options.securityService) {
      return {
        ngModule: MenuModule,
        providers: [{
            provide: MenuService,
            useFactory: menuServiceFactory,
            deps: [options.securityService]
          }]
      }
    } else {
      return {
        ngModule: MenuModule,
        providers: [MenuService]
      };
    }
  }

  constructor (@Optional() @SkipSelf() parentModule: MenuModule) {
    if (parentModule) {
      throw new Error(
        'MenuModule is already loaded. Import it in the AppModule only');
    }
  }
 }

export function menuServiceFactory(_securityService: SecurityService): MenuService {
  return new MenuService(_securityService);
}

Answer 1

在@yurzui 的帮助下——这是重构的模块——

import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenuComponent } from './menu.component';
import { MenuService } from './menu.service';
import { MdMenuModule, MdToolbarModule, MdButtonModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { SecurityModule, SecurityService } from '@savantly/ngx-security';

@NgModule({
  imports: [
    CommonModule,
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule, SecurityModule
  ],
  exports: [
    CommonModule,
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule,
    SecurityModule,
    MenuComponent],
  declarations: [MenuComponent],
  providers: []
})
export class MenuModule {

  static forRoot({securityService = SecurityService}: {securityService?: SecurityService} = {}): ModuleWithProviders {
     return {
        ngModule: MenuModule,
        providers: [{
            provide: MenuService,
            useFactory: menuServiceFactory,
            deps: [securityService]
          }]
      };
  }

  constructor (@Optional() @SkipSelf() parentModule: MenuModule) {
    if (parentModule) {
      throw new Error(
        'MenuModule is already loaded. Import it in the AppModule only');
    }
  }
 }

export function menuServiceFactory(_securityService: SecurityService): MenuService {
  return new MenuService(_securityService);
}