时间戳

首页 > 解决方案 > 带有 AOT 的 Angular 打字稿地图

angular - 带有 AOT 的 Angular 打字稿地图

问题描述

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

//我的图书馆

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 {

}

标签： angulartypescriptangular-aot

解决方案

问题是，如果你想用 --aot 构建它，你不能在@NgModule 中使用任何不能静态分析的东西
所以你不能在@NgModule 内部或static forRoot方法中调用函数。
为了创建一个Map有必要调用一些函数（例如ctor、set）。
您可以替换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);
  }
}

推荐阅读