构建 Angular 应用程序时的不同环境配置

Question

我正在使用 Angular 9，我有一个config.json在运行时加载的文件。我有dev/config.json与prod/config.json被装载依靠，如果我在本地运行的应用程序或建造它的生产。到目前为止，我一直在手动注释文件路径，如下所示：

  // this.configPath = '/config/config-dev.json';
     this.configPath = '/config/config-prod.json'; 

如果路径始终相同会更方便：

     this.configPath = '/config/config.json'; 

并且相应的 config.json 将被复制，具体取决于我是在本地运行还是为 prod 构建：例如在 angular.json 中。

"architect": {
        "build": {        
          "options": {                
            "assets": [
              "src/favicon.ico",
              "src/favicon-16x16.png",
              "src/favicon-32x32.png",
              "src/assets",
              "src/config/dev/config.json",
           or "src/config/prod/config.json",

是否可以设置angular.json以检测应使用哪个配置文件并将其复制到配置文件夹？

Answer 1

从 Angular 4 以后的版本开始，他们已经把一个内置函数放在你可以处理的地方file replacements。这对你来说是一个很好的阅读

对于您的示例，假设您确实有这样的文件结构

???myProject/src/config/
               ???config.ts
               ???config.prod.ts
               ???config.stage.ts

您只需要config.ts根据您要构建的环境来设置 angular 应该替换哪个文件。

像这样的东西

"configurations": {
   "production": {
     "fileReplacements": [
       {
         "replace": "src/environments/config.ts",
         "with": "src/environments/config.prod.ts"
       }
     ],
     ...

要使用生产配置进行构建，请运行以下命令：

 ng build --configuration=production

注意：您要放置的属性config.ts应该是开发环境的默认值。所以每次你去serve你的应用程序时，这些都是将被拉取的值