Angular-cli: No Asset replacement in ng serve

[soyjuanmedina]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [ ] build
• [ x ] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] xi18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

In the previous version works with the filereplacment option

Description

I update to Angular 10 and have an Issue with the filereplacement in the assets.

I find this bug report

https://github.com/angular/angular-cli/issues/16779

That says it's not a bug and give an alternative, to configure different assets for each environment.

It's works for me, but only when I run ng build, but when run ng serve, the assets not be replace

🌍 Your Environment

Angular CLI: 10.0.2
Node: 12.18.0
OS: win32 x64

Angular: 10.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic    
... platform-server, router, service-worker
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.2
@angular-devkit/build-angular     0.1000.2
@angular-devkit/build-optimizer   0.1000.2
@angular-devkit/build-webpack     0.1000.2
@angular-devkit/core              10.0.2
@angular-devkit/schematics        10.0.2
@angular/cdk                      10.0.2
@angular/cli                      10.0.2
@angular/fire                     5.4.2
@angular/material                 10.0.2
@ngtools/webpack                  10.0.2
@schematics/angular               10.0.2
@schematics/update                0.1000.2
rxjs                              6.6.0
typescript                        3.9.6
webpack                           4.43.0

[alan-agius4]

Hi @soyjuanmedina, can you please provide the reproduction steps? Thanks.

[soyjuanmedina]

Hi, thanks.

I'm trying to do it, but I can't achivement.

I create a new proyect:

ng new testApp

Then, in the angular.json I add

"production": {...,
"assets": [
"src/assets",
{
"input": "src/app/customizations/assets/fav/",
"output": "assets/fav/",
"glob": "*.ico"
}
],

And create this new favicon in src/app/customizations/assets/fav/

Then I run

ng build --prod

and I expect in dist/testApp/assets/fav have this new favicon (in my project some similar works) but I still have the old one.

My problem in the main app when I run ng build --prod works ok, but no when I run ng serve --prod

[spwin]

Created repo replicating the issue:
https://github.com/spwin/angular-assets-issue-replicate

It looks like ng serve and ng build are respecting different order when compiling for assets defined in angular.json

From ng serve --verbose

...
LOG from copy-webpack-plugin
    begin globbing '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/favicon.ico' with a context of '/home/smarkevic/ng-test/angular-assets-issue-replicate/src'
    begin globbing '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/assets/**/*' with a context of '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/assets/'
    begin globbing '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/new-assets/**/*' with a context of '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/new-assets/'
    determined that '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/assets/face.png' should write to 'assets/face.png'
    determined that '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/new-assets/face.png' should write to 'assets/face.png'
    determined that '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/favicon.ico' should write to 'favicon.ico'
    writing 'favicon.ico' to compilation assets from '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/favicon.ico'
    writing 'assets/face.png' to compilation assets from '/home/smarkevic/ng-test/angular-assets-issue-replicate/src/assets/face.png'
    skipping 'assets/face.png', because it already exists

copy-webpack-plugin is ignoring the asset if it already exists and just keeps what's first in the list.
For the build assets are processed directly by the builder except when watching - they are then passed to copy plugin as array of asset objects. Which as we know already is ignoring every other asset with the same name if it already exists. Reversing the order of assets list for dev-server solves the issue, so basically chunking

browserOptions.assets.reverse();

just before calling buildBrowserWebpackConfigFromContext() in node_modules/@angular-devkit/build-angular/src/dev-server/index.js:

        // Reverse assets order to be properly processed by webpack-copy-plugin
        browserOptions.assets.reverse();
        const { config, projectRoot, i18n } = await browser_1.buildBrowserWebpackConfigFromContext(browserOptions, context, host, true);

[spwin]

Temporary solution for me was creating assets sandwich with overriding assets both above and below with the same order:

             "assets": [
               {
                 "glob": "**/*",
                 "input": "src/second-override-assets/",
                 "output": "/assets/"
               },
               {
                 "glob": "**/*",
                 "input": "src/first-override-assets/",
                 "output": "/assets/"
               },
               "src/favicon.ico",
               "src/assets",
               {
                 "glob": "**/*",
                 "input": "src/first-override-assets/",
                 "output": "/assets/"
               },
               {
                 "glob": "**/*",
                 "input": "src/second-override-assets/",
                 "output": "/assets/"
               },
             ],

Grim but works

[angular-automatic-lock-bot[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._}