Angular CLI is giving error - Can't resolve '/assets/***sharedfonts/open-sans-v15-latin-300.woff2' after updated to Angular 10

[ErVishalM]

Hi,

I just updated to Angular 10 and before this i was using Angular 9.1 and this was working fine in Angular 9.1 now angular cli is throwing error that
Can't resolve '/assets/***sharedfonts/open-sans-v15-latin-300.woff2'

If i remove the ~ then it is working fine on local server but it is not replacing relative path in styles.d17173f9650483347d45.css production css file.

So because of that i am getting error on production server if i remove ~

Previous Angular 9.1 styles.css production file angular cli was automatically adding my href (MyProject) in path

Angular 10 styles.css production file angular cli not adding my href (MyProject) in path

Adding this ~ before /assets/ i got this answer from here
Please help me what am i missing? Is there something i need to do?

[alan-agius4]

Duplicate of #18013

[alan-agius4]

Duplicate of #18041

[ErVishalM]

Hi @alan-agius4 I am sorry i m disturbing you again but nothing solved my problem
I tried this in angular.json
{ "glob": "**/*", "input": "src/assets/", "output": "./assets/" }
in this time i was using URL as

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/https/github.com/assets/sharedfonts/open-sans-v15-latin-300.eot');}

So this works on localhost but not on production mode. But before in Angular 9.1 i did nothing and i was using ~ like this

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('~/assets/sharedfonts/open-sans-v15-latin-300.eot');}

and it was working on both localhost and on production mode.
Can you please tell me what can i do to solve this

[alan-agius4]

@ErVishalM, without a reproduction and the needed information it's hard to tell what's happening.

[ErVishalM]

Hi @alan-agius4 ,
I'm sorry it took me time to create reproduction actually I never did it before so here is the repository url Now when you will check i am building in prod mode with command
ng build --prod --base-href=/MyAg/ So after build successfully this is the ss of file styles.bc46f4802651edaf4c0b.css

check url which i marked (It is giving me error on production server)

url should be coming as (Expected Output) as this was coming in before in Angular 9. I was using url in styles.scss as ~/assets/ but now ~ is giving error in Angular 10 if I use it.**

[ErVishalM]

Hi @alan-agius4 , have you checked this Can you please reopen this issue as you said it was a duplicate but in those issues also I'm getting the same error in Angular 10. May be anyone not used --base-href in production mode that's why they are not getting any error in production mode.
Thank you!

[alan-agius4]

@ErVishalM, I’ll take a look on Monday.

[ErVishalM]

Hi, @alan-agius4 according to upper mentioned issue best way to use relative path in css but because of this all the files are copied to the root folder which is very difficult for large application there can be so many files so all files will be copied to root folder like this

But before in Angular 9.* it was working correctly so this is breaking change in Angular 10 or there is another way out to use the same as we were using in Angular 9.* in previous cli all files were coming where we mentioned ex in upper case - root/assets/sharedfonts
Thanks.

[ErVishalM]

Hi @alan-agius4 , any update on this.