ng6 workspace: shared resources (styles, assets, scripts) should be merged with configuration specific ones

[akloeber]

Bug Report or Feature Request (mark with an x)

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

Area

- [x] devkit
- [ ] schematics

Versions

@angular/cli 6.0.3
node v8.9.4
yarn 1.6.0

Repro steps

Create angular.json with the following structure:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng6": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "styles": [
              "node_modules/a/a.js",
              "node_modules/b/b.js",
              "node_modules/c/c.js"
            ]
          },
          "configurations": {
            "development": {
              "styles": [
              "node_modules/d/d.js"
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {"replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts"}
              ]
            }
          }
        }
      }
    }
  },
  "defaultProject": "ng6",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

Desired functionality

Shared styles at build.options.styles should be merged with configuration specific ones at build.configurations.<CFG>.styles to avoid defining them again. The same applies for assets and scripts too.

[filipesilva]

I don't agree that arrays should be merged between configurations as a default. Replacement is a more powerful and intuitive model for how configurations should work.

But I do agree that it would be nice to have a way to merge arrays.

[akloeber]

@filipesilva Being able to also use a module that exports the configuration object (e.g. angular.js) like webpack does would help to work around this limitation.

[DmitryEfimenko]

bump (so that the issue does not become stale)
Looking forward to the new merging strategies.

[constantant]

Guys, could you take care of it.
Really needed feature.
In case mixing configs it should work properly.

"production": {
  "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
},
"google-tag-manager": {
  "fileReplacements": [
      {
        "replace": "src/google-tag-manager/modules.ts",
        "with": "src/google-tag-manager/modules.prod.ts"
      }
    ]
}

And just run it ng build --configuration production,google-tag-manager

Expected that the processed config is about

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  },
  {
    "replace": "src/google-tag-manager/modules.ts",
    "with": "src/google-tag-manager/modules.prod.ts"
  }
]

[RouR]

Another way, maybe

"fileReplacements": [
  {
    "replace": "src/some/file.ts",
    "with": "src/some/file.{{custom-param}}.ts"
  } 
]

ng build --configuration production custom-param value1

[mattbushell]

For file replacements this really needs to be a feature, so i can have different targets for production, staging, dev, and various whitelabels of products for strings and css and i8n deployments

[deanfischer]

+1 for a way to merge fileReplacements please! I'm combining environmental build configs with various sub-brand configurations like changing the routing config, switching in a different brand stylesheet etc. In the future I will likely also want to stack on different locale builds but that may not require fileReplacements and would therefore already work.

ng build --configuration production,brand1,fr
ng build --configuration production,brand2,fr

[azerafati]

I was thinking about a solution that goes like this:

• fileReplacements needs to also accept an object instead of an array with custom (named) keys.
• When mixing configs, they always get merged.
• If multiple configurations change the same key, the last-set value is the final one.

   "fileReplacements": {
       "myEnv": {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
       },
       "myModule": {
           "replace": "src/google-tag-manager/modules.ts",
           "with": "src/google-tag-manager/modules.prod.ts"
       }
   }

[dgp1130]

Discussed this within the tooling team today and our take is that deeply merging objects automatically is simply too nuanced. It sounds like a straightforward change, but whether it makes sense for a particular value to be replaced, merged, or concatenated will vary based on the semantics of that field and what the common use cases for it are. Even if merging is commonly useful for a particular field, there will always be use cases that don't want the merging behavior, and opting out of it requires even more options. Always replacing the property may not always be desired, but it is at least consistent and easy to reason about.

The easiest workaround here is to just copy-paste the data into multiple configurations. It is a bit redundant and not ideal but it is the simplest solution.

For bundling JS and CSS, another approach is to make a single entry point for each configuration, and let that entry point import the files you actually want to use for that config. For the original example:

/* app.css */

@import 'node_modules/a/a.css';
@import 'node_modules/b/b.css';
@import 'node_modules/c/c.css';

/* dev.css */

@import 'app.css';
@import 'node_modules/d/d.css';

// angular.json

{
  // ...
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
            "styles": ["app.css"]
          },
          "configurations": {
            "development": {
              // ...
              "styles": ["dev.css"]
            }
          }
        }
}

We think these workarounds would not be significantly improved by defining complex semantics for merging multiple configurations.

[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.}