Angular-builders: fileReplacements fails for .json files in Angular 11

Created on 3 Dec 2020 · 5Comments · Source: just-jeb/angular-builders

Describe the Bug

A fileReplacement definition of a .json file fails in Angular 11 when building with @angular-builders/[email protected] and @angular-devkit/[email protected], but worked in Angular 10.2.3 with @angular-builders/[email protected] and @angular-devkit/[email protected].

ng build --configuration=dev shows this error:

Schema validation failed with the following errors:
  Data path ".fileReplacements[0]" should NOT have additional properties(replace).      
  Data path ".fileReplacements[0].replace" should match pattern "\.([cm]?j|t)sx?$".     
  Data path ".fileReplacements[0]" should match exactly one schema in oneOf.

Minimal Reproduction

Here's the relevant configuration in angular.json of the fileReplacements section defining a .json file:

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "configurations": {
            "dev": {
              "fileReplacements": [{
                "replace": "src/environments/config.json",
                "with": "src/environments/config.dev.json"
              }]
            },
            ...

ng build --configuration=dev

Expected Behavior

I expect the build to complete successfully and to replace the contents of src/environments/config.json with src/environments/config.dev.json.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment


Libs
- @angular/core version: 11.0.3
- @angular-devkit/build-angular version: 0.1100.3
- @angular-builders/custom-webpack version: 11.0.0-beta.1

For Tooling issues:
- Node version: 14.15.0  
- Platform:  Windows 10 

Others:

Additional Context

I suspect this issue is due to an overzealous schema definition in node_modules/@angular-builders/custom-webpack/dist/browser/schema.json.

For Angular 10, schema.json (starting at line 437) contains:

    "fileReplacement": {
      "oneOf": [
        {
          "type": "object",
          "properties": {
            "src": {
              "type": "string"
            },
            "replaceWith": {
              "type": "string"
            }
          },
          "additionalProperties": false,
          "required": [
            "src",
            "replaceWith"
          ]
        },
        {
          "type": "object",
          "properties": {
            "replace": {
              "type": "string"
            },
            "with": {
              "type": "string"
            }
          },
          "additionalProperties": false,
          "required": [
            "replace",
            "with"
          ]
        }
      ]
    },

For Angular 11, schema.json (starting at line 454) contains:

    "fileReplacement": {
      "oneOf": [
        {
          "type": "object",
          "properties": {
            "src": {
              "type": "string",
              "pattern": "\\.([cm]?j|t)sx?$"
            },
            "replaceWith": {
              "type": "string",
              "pattern": "\\.([cm]?j|t)sx?$"
            }
          },
          "additionalProperties": false,
          "required": [
            "src",
            "replaceWith"
          ]
        },
        {
          "type": "object",
          "properties": {
            "replace": {
              "type": "string",
              "pattern": "\\.([cm]?j|t)sx?$"
            },
            "with": {
              "type": "string",
              "pattern": "\\.([cm]?j|t)sx?$"
            }
          },
          "additionalProperties": false,
          "required": [
            "replace",
            "with"
          ]
        }
      ]
    },

In @angular-devkit/build-angular for Angular 11 (file node_modules/@angular-devkit/build-angular/src/browser/schema.json), the fileReplacement string pattern is "\\.(([cm]?j|t)sx?|json)$" to include .json files.

When i changed the patterns in node_modules/@angular-builders/custom-webpack/dist/browser/schema.json in my local environment, the build completed successfully.

Source

dphochman

👍1

Most helpful comment

@just-jeb Yes using '@angular-devkit/build-angular:browser' (and removing 'customWebpackConfig' from angular.json) builds successfully, and '@angular-builders/build-angular:browser' fails to build (without changing the schema). Yes, '@angular-devkit' changed the schema, and that change should be made in '@angular-builders' too.

The only significant differences between the schemas are the "customWebpackConfig" section and the pattern for fileReplacement properties src, replaceWith, replace & with. You can verify with this command:
git diff -w --no-index node_modules/@angular-builders/custom-webpack/dist/browser/schema.json node_modules/@angular-devkit/build-angular/src/browser/schema.json

dphochman on 10 Dec 2020

👍2

All 5 comments

a temporary workaround: install package 'json' as a devDependency, add this script to package.json:

"fix-custom-webpack": 
"json -I -f node_modules/@angular-builders/custom-webpack/dist/browser/schema.json -e \"var pattern = '\\\\.(([cm]?j|t)sx?|json)$'; this.definitions.fileReplacement.oneOf.forEach(schema => Object.keys(schema.properties).forEach(propName => {if (schema.properties[propName].pattern) schema.properties[propName].pattern = pattern;}));\"",

and add/append npm run fix-custom-webpack to the 'postinstall' script.

dphochman on 10 Dec 2020

I don't think the issue is in the builder. It's probably a change in original Angular builder schema.
Would you mind try and see what happens when you replace custom-webpack builder with the original Angular builder?