angular 中带有 AOT 的 Typescript 映射

Question

我在我的 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 {

}

Answer 1

问题是如果你想用 --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);
  }
}

angular 中带有 AOT 的 Typescript 映射

Typescript map in angular with AOT

typescript

angular

angular-aot