Different assets in cli config for ng serve and ng build [Angular 5]

Question

Is possible to use different assets array when i use ng build?

"assets": [
  "assets",
  "favicon.ico",
  {
    "glob": "**/*",
    "input": "../externalDir",
    "output": "./app/",
    "allowOutsideOutDir": true
  }
]

In my case when i use ng build i want to build only this:

"assets": [
  "assets",
  "favicon.ico"
]

score 4 · Answer 1 · answered Dec 03 '19 at 17:35

My case was to include different robots.txt file per environment. So, in the src/environments folder I created two files: robots.txt and robots.prod.txt. In angular.json include it in assets array and use fileReplacements as follow (I paste only the relevant parts):

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/assets",
        {
          "glob": "robots.txt",
          "input": "src/environments/",
          "output": "/"
        }
      ]
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/robots.txt",
            "with": "src/environments/robots.prod.txt"
          }
        ]
      }
    }
  }
}

I am using @angular/cli: ~8.3.4.

Angular never intended file replacements to work for files not included in the bundle. I don't believe this would work in Angular 9 and beyond. See this issue: https://github.com/angular/angular-cli/issues/16779 — ding, Jan 07 '22 at 18:03

score 2 · Accepted Answer · answered Dec 21 '17 at 14:46

I don't believe there is an option to do environment specific assets. But you can make additional apps in your angular-cli.json which are basically just copies of each other, but with different assets. For example

// angular-cli.json
"apps": [
    {
        "root": "src",
        "outDir": "dist",
        "name": "devApp",
        "assets" : [
            "assets",
            "favicon.ico",
            {
                "glob": "**/*",
                "input": "../externalDir",
                "output": "./app/",
                "allowOutsideOutDir": true
            },
        ],
        ...
    },
    {
        "root": "src",
        "outDir": "dist",
        "name": "prodApp",
        "assets": [
            "assets",
            "favicon.ico"
        ],
        ...
    }
]

Now you can build your assets differently by building a specific "app"

// dev
ng build --app=0
// or
ng build --app=devApp

// prod
ng build --app=1
// or
ng build --app=prodApp

Angular cli docs on multiple apps.

Different assets in cli config for ng serve and ng build [Angular 5]

2 Answers2

Linked