feat(@angular/cli): support using multiple configurations

It's now possible to use multiple configurations by separating them with a comma:
```
ng build --configuration=one,two,three
```

They will be applied from left to right. If `--prod` is also present, it will be considered to be the first configuration and thus able to be overriden.

You can also use it in target strings:
```
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "latest-project:build:one,two"
          },
          "configurations": {
            "production": {
              "browserTarget": "latest-project:build:production,one,two"
            }
          }
```

Fix angular#10612

Author: filipesilva

packages/angular/cli/models/architect-command.ts

@@ -366,10 +366,14 @@ export abstract class ArchitectCommand<
     } else {
       project = commandOptions.project;
       target = this.target;
-      configuration = commandOptions.configuration;
-      if (!configuration && commandOptions.prod) {
+      if (commandOptions.prod) {
+        // The --prod flag will always be the first configuration, available to be overwritten
+        // by following configurations.
         configuration = 'production';
       }
+      if (commandOptions.configuration) {
+        configuration += `${configuration ? ',' : ''}${commandOptions.configuration}`;
+      }
     }
 
     if (!project) {

tests/legacy-cli/e2e/tests/build/multiple-configs.ts

@@ -0,0 +1,69 @@
+import { expectFileToExist } from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+import { expectToFail } from '../../utils/utils';
+
+export default async function () {
+  await updateJsonFile('angular.json', workspaceJson => {
+    const appArchitect = workspaceJson.projects['test-project'].architect;
+    // These are the default options, that we'll overwrite in subsequent configs.
+    appArchitect['options'] = {
+      outputPath: 'dist/latest-project',
+      index: 'src/index.html',
+      main: 'src/main.ts',
+      polyfills: 'src/polyfills.ts',
+      tsConfig: 'tsconfig.app.json',
+      assets: [
+        'src/favicon.ico',
+        'src/assets',
+      ],
+      'styles': [
+        'src/styles.css',
+      ],
+      'scripts': [],
+    };
+    const browserConfigs = appArchitect['build'].configurations;
+    browserConfigs['production'] = {
+      extractCss: true,
+    };
+    browserConfigs['one'] = {
+      assets: [],
+    };
+    browserConfigs['two'] = {
+      polyfills: undefined,
+    };
+    browserConfigs['three'] = {
+      extractCss: false, // Defaults to false when not set.
+    };
+  });
+
+  // Test the base configuration.
+  await ng('build');
+  await expectFileToExist('dist/test-project/favicon.ico');
+  await expectFileToExist('dist/test-project/polyfills-es2015.js');
+  await expectFileToExist('dist/test-project/styles-es2015.js');
+  await expectFileToExist('dist/test-project/vendor-es2015.js');
+  // Test that --prod extracts css.
+  await ng('build', '--prod');
+  await expectFileToExist('dist/test-project/styles.css');
+  // But using a config overrides prod.
+  await ng('build', '--prod', '--configuration=three');
+  await expectFileToExist('dist/test-project/styles-es2015.js');
+  await expectToFail(() => expectFileToExist('dist/test-project/styles.css'));
+  // Use two configurations.
+  await ng('build', '--configuration=one,two', '--vendor-chunk=false');
+  await expectToFail(() => expectFileToExist('dist/test-project/favicon.ico'));
+  await expectToFail(() => expectFileToExist('dist/test-project/polyfills-es2015.js'));
+  // Use two configurations and two overrides, one of which overrides a config.
+  await ng('build', '--configuration=one,two', '--vendor-chunk=false', '--polyfills=src/polyfills.ts');
+  await expectToFail(() => expectFileToExist('dist/test-project/favicon.ico'));
+  await expectFileToExist('dist/test-project/polyfills-es2015.js');
+  await expectToFail(() => expectFileToExist('dist/test-project/vendor-es2015.js'));
+  // Use two configurations and a override, and prod at the end.
+  await ng('build', '--configuration=one,two', '--vendor-chunk=false', '--prod');
+  await expectToFail(() => expectFileToExist('dist/test-project/favicon.ico'));
+  await expectToFail(() => expectFileToExist('dist/test-project/polyfills-es2015.js'));
+  await expectToFail(() => expectFileToExist('dist/test-project/vendor-es2015.js'));
+  await expectFileToExist('dist/test-project/styles-es2015.js');
+  await expectToFail(() => expectFileToExist('dist/test-project/styles.css'));
+}