ng build: image in assets folder gets copied twice, once in root dist and another in dist/assets

[prabh-62]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, I didn't notice this bug in v12.0

Description

When referencing images from assets folder, the build process copies the same image twice, in dist and dist/assets folder

🔬 Minimal Reproduction

❯ npx @angular/cli@12 new web-apps --create-application false
❯ cd web-apps
❯ yarn ng generate application command-center --routing --style scss

• Add a file projects/command-center/src/assets/cross.svg.

 <svg width="24" height="24" viewBox="0 0 496 496" xmlns="http://www.w3.org/2000/svg">
  <defs />
  <title>
    Cross
  </title>
  <path
	      d="M248 0C111 0 0 111 0 248s111 248 248 248 248-111 248-248S385 0 248 0zm0 448c-110.5 0-200-89.5-200-200S137.5 48 248 48s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L287.6 248l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L248 287.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"
	      fill="#E02020" fill-rule="nonzero" />
	</svg>

• Edit projects/command-center/src/styles.scss and add

     .cross {
       background-image: url('assets/cross.svg');
     }

❯ yarn ng build --project command-center

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 12.1.0
Node: 16.4.0 (Unsupported)
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.4
    

Anything else relevant?

[alan-agius4]

This is working as expected.

Resources referenced in stylesheets will be fingerprinted and copied automatically by the build system.

Placing these resources inside the assets directory will cause them to be copied twice. To avoid the double copied of resources, you could be to place them in a separate sub-directory of assets and exclude these from being copied using the ignore option.

See: https://angular.io/guide/workspace-config#assets-configuration

Alternatively please these resources outside of the assets directly completely.

[prabh-62]

@alan-agius4 I tried the approach mentioned in the linked article, however, CLI still copies SVG file in the build. Can you try yourself to verify if it actually works?

[alan-agius4]

Hi @prabh-62, the above does work for me.

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