Question

我有3个不同的环境：我的angular 8应用程序的dev，tst和prod。我需要根据环境导入第三方库。

我有3个不同的版本-每个环境一个。叫他们

lib.dev.js
lib.tst.js
lib.prod.ts

通常，我将像使用jquery这样导入这些库：

import lib from 'assets/lib.<environment>.js';

我该如何实现？

Ps。这是我为应用程序提供服务的方式：ng serve -c=dev

angular.json配置（如果有的话）：

...
"dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ]
        },
        "tst": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.tst.ts"
            }
          ]
        }
...

编辑：

仍然是一个问题，尽管我进行了一些更改。现在，我从index.html导入，就像这样：

<script src="assets/lib.js"></script>

是否有基于环境有条件地从模板导入的想法？

Answer 1

这可能是解决您问题的方法。

在main.ts中，

    import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
    import { wrappedAppModule } from './app.module';

    export function main(yourEnvironment: string) {
      browserDynamicPlatform().bootstrapModule(wrappedAppModule (yourEnvironment));
    }

您可以像这样包装ngModule。

import { NgModule } from '@angular/core';
import { ProdLib }  from 'assets/lib.prod.js';
import { TstLib }   from 'assets/lib.tst.js';
import { DevLib }   from 'assets/lib.Dev.js';

export function wrappedAppModule (yourEnvironment) {
  @NgModule({
    imports: [
        (yourEnvironment == 'prod') ? ProdLib,
        (yourEnvironment == 'tst') ? TstLib,
        (yourEnvironment == 'dev') ? DevLib
    ]
  })
  class AppModule { }

  return AppModule;
}

Angular 8-为不同的环境导入不同的库

1 个答案: