Angular 6 - angular.json - copying assets with renaming

Question

I am trying to rename a file during the assets copy of ng build

Here is what I have used in angular.json:

        "outputPath": "dist",
        "assets": [
          ...,
          {
            "glob": "favicon-v1.png",
            "input": "src/client",
            "output": "/favicon.png"
          },
          ...,
        ],

Instead of creating file dist/favicon.png, ng build is creating a dist/favicon.png/favicon-v1.png.

It seems to refuse to rename the file - it always creates a folder with the name I wanted to use favicon.png and then puts the original file inside it.

Is it expected behavior? Any workaround other than renaming the file favicon-v1.png to favicong.png in the source control?

I am using:

    "@angular/cli": "^6.1.5"

    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@angular/upgrade": "^6.0.1",

Update: Similar code works fine with angular-cli.json in Angular 5.

Ireful

Even I recently faced the same issue with angular8 – Scullion

Hey yes, this is expected behavior, it doesn't rename files, I wish it would. In my case, I'm using different files for the firebase service worker for push notifications, and had to actually create a different folder for each environment to put the file inside, and then add it to assets in each configuration of angular.json – Wolbrom

Answer 1

You cannot rename the file like this since input and output properties are folders. Look at the documentation here. I don't know why exactly you need that but you could for example put the v1 icon in a v1 subfolder with already the final name and then you can use the asset setting to copy from the v1 folder to the output when you need the v1 icon. Else you can always use a custom library or a custom script to do it and remove it from the assets.

Naturalist

Weird thing is that similar code works fine in Angular 5 where angular-cli.json was used. – Ireful