与AOT成角度的打字稿地图

时间:2018-08-17 05:12:08

标签: angular typescript angular-aot

我在我的有角度的应用程序中使用打字稿映射(testMap: Map<string, Array<string>> = new Map<string, Array<string>>();),如果我使用'ng serve'运行它,一切都会正常。但是,如果使用“ ng serve --aot”运行它,则地图将无法正常工作。我没有收到任何异常,但调试代码时映射为null。我想知道这是否是已知问题,以及是否有解决方法。谢谢您的帮助。

// myLibrary

export class MyModule {
   static forRoot(config: MyConfig ): ModuleWithProviders {
    return {
      ngModule: MyModule,
      providers: [
          {provide: MY_CONFIG, useValue: config} 
      ]
    }
  }

}


export class MyConfig {
    myArray? :  string[];
    myMap?: Map<string, string[]>;

}

//用户应用程序

export const testMap: Map<string, string[]> = new Map<string, string[]>();
testMap.set("key1", ["value1", "value2"]);
testMap.set("key2", ["value3", "value4"]);


@NgModule({
  declarations: [
// some code
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    MyModule.forRoot({
        myArray: ["1234"],
        myMap: testMap,
      }
    ),
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

1 个答案:

答案 0 :(得分:2)

问题是,如果要使用--aot
进行构建,则无法使用@NgModule内部无法静态分析的任何内容。 因此,您既不能在@NgModule内部也不能在static forRoot方法中调用函数。
为了创建Map,必须调用某些函数(例如ctor,set)。
您可以将Map替换为普通数组,它将起作用。
稍后可以从Map这样的数组构造Map:

//...
export class MyConfig {
    myArray? :  string[];
    myMap?: [string, string[]][];

}
//...
export const testMap = [['test1', ['test1', 'test2']]]
//...
// setting up imports
MyModule.forRoot({
    myArray: ["1234"],
    myMap: testMap,
  }
),
//...
// config usage in your library
@Injectable()
export SomeService {
  private readonly myMap: Map<string, string[]>;
  constructor(@Inject(MY_CONFIG) config: MyConfig) {
    // converting from array to map
    this.myMap = new Map(config.myMap);
  }
}