Build App with Multiple Configurations

Question

Is it possible to combine common styles along with configuration specific styles? Or to be specific, build app with multiple configurations?

---

I have an app which uses different material themes depending on the configuration used during the build. This is how build section of app's angular.json looks like:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/my-app",
        "index": "src/index.html",
        "main": "src/main.ts",
        "tsConfig": "src/tsconfig.app.json",
        "scripts": [ ],
        "styles": [
          // These are the common styles
          "src/styles.scss"
        ],
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
      },
      "configurations": {
        "theme-one": {
          "styles": [                
            "src/styles/themes/material.theme-one.scss"
          ]
        },
        "theme-two": {
          "styles": [                
            "src/styles/themes/material.theme-two.scss"
          ]
        }
      }
    },

---

▶ Expected Behavior:

I would like to add/combine the styles specified in individual configuration along with the styles specified in build:options. For example, using the following command:

ng build --configuration theme-one

The above command should include "src/styles.scss" and "src/styles/themes/material.theme-one.scss". Same for theme-two.

▶ Current Behavior:

Current behavior is that when I specify the configuration, the styles from that configuration are included but build:options:styles are ignored.

Any idea how I can achieve this?

Answer 1

after discussing your question with Filipe Silva (from the CLI core team), there is no API available right now for doing this. I suggest you open an issue with this as a feature request, on the CLI repo.

In the meantime, one way to accomplish that is to duplicate the configuration options, something like this:

"configurations": {
    "theme-one": {
      "styles": [   
        "src/styles.scss",          
        "src/styles/themes/material.theme-one.scss"
      ]
    },
    "theme-two": {
      "styles": [
        "src/styles.scss",                
        "src/styles/themes/material.theme-two.scss"
      ]
    }
  }

Cheers.