Angular 12 : Loading svg using url(../../assets/images/app_logo.svg) is not working in Scss

[ngdevelop-tech]

🐞 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, the previous version in which this bug was not present was: Angular 10

Description

Recently I have created a new application using angular 12 in which I am getting the following bug,

I am using SVG image as background: url('../../assets/images/app_logo.svg') no-repeat; in auth.component.scss file, When I do any changes in this file it renders it in the first load properly but when I do any changes in other files, it is not able to get the image and gives GET http://localhost:4200/app_logo.svg 404 (Not Found).

During this time I am getting the following error in the console

Previously it was working in angular 10.
I have checked these #18115, #18013, #18041 and #18043 related issues but not found any proper solution.

🔬 Minimal Reproduction

In AppComponent template add one div and load any svg file from assets in that div as background

<!-- app.component.html -->
<div class="root"></div>

// app.component.scss
.root{
    background: url('../assets/images/app_logo.svg') no-repeat;
    height: 200px;
}

Serve your application, when you save changes in app.component.scss it will render the image properly. Now update anything in any other file let's take in app.component.html, Now when an application is reloaded it will not show the logo SVG image.

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 12.0.1
Node: 12.17.0
Package Manager: npm 6.14.4
OS: win32 x64

Angular: 12.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[bogacg]

In my case changes made to inline styles (component.ts file) are not getting updated and I guess this is also related to that. Thanks @alan-agius4 for the fix, hope next version gets published soon.

[alan-agius4]

In my case changes made to inline styles (component.ts file) are not getting updated and I guess this is also related to that. Thanks @alan-agius4 for the fix, hope next version gets published soon.

I doubt it is. Can you please file a new issue? Thanks

[acohenOT]

I'm seeing the same problem as the original report except I get 404 errors also on initial compilation of ng serve -- no recompile required. Then, like the original report says, if I make any change and let it recompile, it fixes just that one component. All others are still broken.

[acohenOT]

Now that I look closely, I'm seeing the initial compilation and then immediately a second one without any changes. That might be caused by issue #20891.

Build at: 2021-05-21T17:43:52.564Z - Hash: 85396fd6d8d11848d7a5 - Time: 194121ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
√ Browser application bundle generation complete.

22 unchanged chunks

Build at: 2021-05-21T17:44:24.725Z - Hash: 647b033e7438dc7f3fd0 - Time: 26547ms

√ Compiled successfully.

[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.}