fileReplacements fails for .json files in Angular 11

See original GitHub issue

Describe the Bug

A fileReplacement definition of a .json file fails in Angular 11 when building with @angular-builders/custom-webpack@11.0.0-beta.1 and @angular-devkit/build-angular@0.1100.3, but worked in Angular 10.2.3 with @angular-builders/custom-webpack@10.0.0 and @angular-devkit/build-angular@0.1002.0.

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
dphochmancommented, Dec 10, 2020

@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

1reaction
just-jebcommented, Dec 14, 2020

Hey @dphochman, mind trying out 11.0.0-beta.2?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular.json's fileReplacements no longer accept .html ...
Angular 11's angular.json no longer allows fileReplacements with .html files, as the @angular/cli schema says .html files are invalid. ng ...
Read more >
Cannot set fileReplacements to replace folder content with ...
I'm using the angular cli config fileReplacements in angular.json file to replace a folder content, like this:
Read more >
Developers - fileReplacements fails for .json files in Angular 11 -
A fileReplacement definition of a .json file fails in Angular 11 when building with @angular-builders/custom-webpack@11.0.0-beta.1 and ...
Read more >
Building and serving Angular apps
The main CLI configuration file, angular.json , contains a fileReplacements section in the configuration for each build target, which lets you replace any ......
Read more >
File replacements when building angular projects
This short article is about replacing files (e.g. configuration files) for different build configurations/targets (like dev , qa and prod ) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found