feat(@angular/cli): build with multiple configurations

[faisalmuhammad]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Area

- [x] devkit
- [ ] schematics

Versions

node --version v8.11.2
npm --version 6.0.1

Desired functionality

I have an app which uses different material themes depending on the configuration used during the build. It would be extremely beneficial if we can specify multiple build configurations either from the terminal or inside the angular.json file. For example, like this in the angular.json file inside the serve entry:

"configurations": {
  "theme-one": {
    "browserTarget": "my-app:build:common-config:theme-one"
  },
  "theme-two": {
    "browserTarget": "my-app:build:common-config:theme-two"
  }
}

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": [
      "src/styles.scss"
    ],
    "assets": [
      "src/assets",
      "src/favicon.ico"
    ]
  },
  "configurations": {
    "common-config": {
      "styles": [
        "src/styles.scss"
      ]
    },
    "theme-one": {
      "styles": [
        "src/styles/themes/theme-one/material.theme.scss"
      ]
    },
    "theme-two": {
      "styles": [
        "src/styles/themes/theme-two/material.theme.scss"
      ]
    }
  }
},

Current behavior is that when I specify the configuration, the styles from that configuration are built and build:options:styles are ignored. I would like to add/build 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 build "src/styles.scss" and "src/styles/themes/theme-one/material.theme.scss". Same for theme-two.

[duki994]

@faisalmuhammad

You can use this.
First specify import in styles.scss.

@import 'path/to/custom/theme-name.scss';

Create same configurations but with different fileReplacements array.
Just add JSON element to fileReplacements array, to replace one file with another.

"fileReplacements": [
    {
        "replace": "AngularApp/src/environments/environment.ts",
         "with": "AngularApp/src/environments/environment.prod.ts"
     },
     {
        "replace": "path/to/custom/theme-name.scss",
         "with": "path/to/custom/theme-one.scss"
     }
 ]

[faisalmuhammad]

@duki994 , Unfortunately this does not solve the problem. I am looking for a solution where I can build my app with multiple configurations. This is not possible at the moment.

[filipesilva]

Heya, the feature you are requesting is partially #11149 and partially #10612. I'm closing this one not because it doesn't have merit, but just because there's already a conversation going on for the individual bits in those issues.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}