CODEWITHSUNDEEP
angularangular10
AndideBob
AndideBob

Reputation: 160

Angular 10 FileReplacements not working for Assets

We are currently upgrading out project from Angular 8 to 10, and we are running into some trouble with the file replacements during build. We have 2 different stylings with different texts which used to be selected by doing FileReplacements in the configs. They look something like this:

"fileReplacements": [
  {
    "replace": "src/index.html",
    "with": "src/index.xy.html"
  }
  {
    "replace": "src/assets/text/de.json",
    "with": "src/assets/text/de.xy.json"
  }
]

The strange thing is, that for the html files the replace seems to work, however for the assets it does not. We would love to get this to work, and also generally understand why it used to work and now does not.

Here are the versions from our package.json:

"dependencies": {
    "@angular/common": "10.2.3",
    "@angular/compiler": "10.2.3",
    "@angular/core": "10.2.3",
    "@angular/forms": "10.2.3",
    "@angular/platform-browser": "10.2.3",
    "@angular/platform-browser-dynamic": "10.2.3",
    "@angular/router": "10.2.3",
    ...
}
"devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular-devkit/build-ng-packagr": "~0.1002.0",
    "@angular-devkit/core": "~10.2.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "^10.2.3",
    ...
}

Upvotes: 7

Views: 8189

Answers (3)

Coderer
Coderer

Reputation: 27304

Just for completeness, since you are also replacing your index.html, you should be aware of an alternate solution for index.html specifically:

"architect":{
  "build": {
    "options": {
     "index": "src/index.html", //non-prod
    },
    "configurations": {
      "production":{
      "index": { //prod index replacement
        "input": "src/index.prod.html",
        "output": "index.html
      }
    }
  }
}

Upvotes: 0

Shuai Yuan
Shuai Yuan

Reputation: 41

I just had our file replacement worked for angular 10, the way in the question has been ceased since angular 9, and seems file replacements outside the bundles never been officially supported, so need to change to this way: i.e. if you wanna do the following

 {
    "replace": "src/assets/text/de.json",
    "with": "src/assets/text/de.xy.json"
  }

then you need to change it to do the following in configurations:

...
"assets": [
             ...
             {
                "input": "src/assets/text/xy",
                "output": "assets/",
                "glob": "de.json"
              }
           ]
...

before that code, you need to create xy folder and put your de.xy.json file there, and rename to de.json.

so the above config will try to find "de.json" file in "src/assets/text/xy", and copy to "assets" folder when building into dist.

Upvotes: 4

zaphod
zaphod

Reputation: 165

Reading issue https://github.com/angular/angular-cli/issues/16779 it seems to have worked unintentionally and the better approach is having the configuration files in separate folders and setting the following assets option

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "input": "src/deployment/staging",
    "output": "/",
    "glob": "*.yml"
  }
],

Upvotes: 6

Related Questions