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('/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.

[alan-agius4]

Hi @ErVishalM,

This is working as expected. When using root paths / together with baseHref. the base href value is not inlined as part of the resource path in the CSS files. This has also been the case for a number of previous versions. if you want the base href to be included you can opt-in the deprecated behaviour using the rebaseRootRelativeCssUrls option.

If you wish that processed assets are not placed in the root of dist folder you can use the resourcesOutputPath option.

More information about these options can be found: https://angular.io/cli/build

[ErVishalM]

Hi @alan-agius4 , Thanks for the reply. In my case assets are already coming in assets/sharedfonts folder so now what should i change in css to be pick all the related assets from this folder only. As in Angular 9.*,I already mentioned , I was using url like this

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

which was working and all the assets were coming in assets/sharedfonts and css was picking all the assets from there see the path. The base href value is inlined as part of the resource path in the CSS files.

now why its not working in Angular 10 why ~ it is giving me error? Why i need to change in code if everything is working as expected? because now behavior is not the same as it was working in Angular 9.*.
Now i don't know what change i have to do to get the same behavior, as it was working before

If i use this rebaseRootRelativeCssUrls: true in angular.json then i am getting the correct behavior as it was working before now I don't know when it will remove in future as mentioned there this is deprecated behavior (If this is deprecated then there should be best and standard way to do this right please suggest me with an example?)

Assets should be coming in assets/sharedfonts as it is already coming with using --base-href=/MyAg/ but what change should I do, that all the relative path will come with basehref like this /MyAg/assets/sharedfonts in css. Can you please give me an example for this till that time i'll be using rebaseRootRelativeCssUrls: true.

[alan-agius4]

@ErVishalM, having the base href inlined in the bundle when using root level paths ie paths starting with a / is non standard and is deprecated behaviour which will be removed in the future without a replacement.

Since version 9, the base href value is not included in the final css file unless opting in the deprecated behaviour mentioned above. See: #14587. The rebaseRootRelativeCssUrls option is there to allow users enough time to transition away from needing a base href inlined in their stylesheet.

In most cases users should rely upon the build system to process and emit assets referenced in CSS.

Paths starting with ~/, ^/ etc.. are Webpack specific features which we always encountered users not to rely upon as these are unsupported and might break in the future version without warning.

[ErVishalM]

@alan-agius4 , with due respect as you can see there are so many people waiting for correct answer and as your are saying all we are using a non standard method and rebaseRootRelativeCssUrls this will be remove in future so can you please create a sample for us to teach what is the standard for this which standard we can use. Please give us a working example with this requirement so that our life will be easy.
Please do this favour for us.

[alan-agius4]

@ErVishalM, the recommended approach is to use either relative paths were the assets will be processed out-of-the-box by the build system or use root paths if you want to load assets which are not relative to your base-href where you will need to copy the assets manually using assets option.

[ErVishalM]

@alan-agius4 , Thanks for the information.
I love seeing a sample but it's ok as I asked 3-4 times already.

Forget it. Thank you so much for helping me in a way. 👍😊

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