Question

让我们假设我有一个非常简单的显示地图的应用程序。我将把所有地图组件和服务放入一个名为MapModule的模块中。此应用程序/代码库的目标是与多个用户共享，然后可以与他们的首选映射提供程序一起提供服务/构建应用程序。对于此示例，假设google / mapbox是仅有的两个提供程序。

所以我们有两个MapModule版本，理论上它们具有完全相同的服务和组件接口，只是实现方式不同。

MapModule（Google）
MapModule（地图框）

当我执行ng build或ng serve时，我希望能够传递一个标志来告知工具使用MapModule的Google版本或Mapbox版本，以及一个标志，分别指示提供者的api令牌

例如

ng build --map-provider=google --map-token=################

更新31/07/2018

似乎无法向构建提供自定义标志，所以我改为创建单独的构建配置，使用单独的环境文件来配置要提供的映射服务。到目前为止，我拥有的解决方案大都可以使用，但是单独的库包含在构建中，而不会在摇动/优化中删除。

我创建了另一个环境文件

map-proivder.ts

export const mapProvider = {
  selected: false,
  provider: ''
};

然后，我基于环境文件配置将在新模块中使用的服务，该文件已在angular.json中替换。这也使我可以为服务创建一个界面。

angular.json

....
"configurations": {
    "google": {
      "fileReplacements": [
        {
          "replace": "src/environments/map-provider.ts",
          "with": "src/environments/map-provider.google.ts"
        }
      ]
    },
....

map-interface.module.ts

export function mapProviderFactory() {
  if (mapProvider.selected) {
    if (mapProvider.provider === 'google') {
      return new GoogleMapsMapObjectService();
    } else if (mapProvider.provider === 'mapbox') {
      return new MapboxMapObjectService();
    } else {
      throw new Error('No map provider selected');
    }
  } else {
    throw new Error('No map provider selected');
  }
}

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MapComponent
  ],
  exports: [
    MapComponent
  ]
})
export class MapInterfaceModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MapInterfaceModule,
      providers: [{
        provide: MapObjectService,
        useFactory: mapProviderFactory
      }]
    };
  }
}

然后我可以运行应用程序ng serve -c google，并使用Google实施的服务。

问题

该应用程序运行良好，我可以随时在mapbox / google实现之间进行切换，但是我不能仅使用 mapbox或google库来构建应用程序。

@ angular / cli-以不同的版本交换模块

0 个答案: