Angular-cli: Assets not found in scss/css when using base-href

[maxpfandl]

Please provide us with the following information:

OS?

Windows 10 x64

Versions.

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.28.3]
node: 7.2.0
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.7

Repro steps.

create an app with ng-cli. create a build for a server (not ng serve) with base-href set to xxx. use url's in scss (like background-image: url('/assets/img/myimg'). the imagepath for the url will be set to server/assets/img/myimg instead of server/xxx/assets/img/myimg. If I try to use a relative path in the scss (ie url('./assets/img/myimg') ) i get a compileerror, that this is not resolveable. If i try to use url('assets/img/myimg') this is also not resolveable for the compiler.
my .angular-cli.json has this section:
"assets": [
"assets",
"favicon.ico"
],

The log given by the failure.

There is only a compileerror that the path is not resolveable or a runtime 404 when the resource is not found without using the base-ref in the url.

Mention any other details that might be useful.

There is a workaround for this issue: i set the style in my component directly and inject it like this:

getLogo() {
return this._domSanitizer.bypassSecurityTrustStyle(url(${this.logosrc});
}

where logosrc = "./assets/img/myimg"

---

Thanks! We'll be in touch soon.

[chriseenberg]

I'm having the same issue. Building with href flag makes my assets folder unreachable to my code. If i navigate to the path in the browser with the href put into it, the image gets loaded.

I should add that i dont use it in the scss but simply adding a <img> tag and a path to assets folder.

Is there a workaround to this?

Kind regards - Chris

[maxpfandl]

@chriseenberg this actually works fine for me: simply use

<img src="./assets/img/myimg">

and make sure your assets folder is set in .angular-cli.json in the assets section.
I've used this pattern also in the scss-files, but the newest version broke this and i get a compile-error that those path's cannot be resolved.

[chriseenberg]

It seems that what ever you linked is broken :/ where it says: "simple use " and then something that i can't resolve.

Thanks for answering my post. I tried adding the assets folder to angular-cli.json, but it will prefix my assets folder with the specified href tag so i cant reach my images i.e. href = xxx - xxx/assets/images - where i look for assets/images . From what i understand from your post, this is supposed to work?

Im sorry if i misunderstood your post in the first place :)

[clydin]

The root relative URL handling for style sheet urls is currently broken if using a base href. As a workaround you can use a relative URL that is referenced from the stylesheet instead of the project root. This will cause the asset to be managed by the build system so be aware that you will end up with two copies if the asset is also copied on build.

Also note that, HTML templates are unaltered by the build process.

[chriseenberg]

It works now. i navigated to the resource with ../ instead of ./ as you said @maxpfandl ! Thank you so much for your help!

[arntj]

I'm having the same problem. Relative paths in stylesheets don't work after updating to angular-cli beta 32.3.

[arntj]

If it is helpful to you, I can try to make a minimal repro of this issue.

[clydin]

Please try using a relative path from the stylesheet/component location instead of the project root.

[arntj]

@clydin I tried doing that, but that didn't help. Actually, having to use a relative path is a part of the problem.

The problem in my case, is that I used to link the image like this, in the scss:
background-image: url(assets/some_image.png)

This would work, as the url path wouldn't be touched/changed, and the image placed in src/assets is correctly copied to the assets subdirectory in the ng build output.

But in the latest version of angular-cli, that won't compile. If I change to a path relative to the scss file, as @clydin suggests, then angular-cli will happily compile it. But now the problem is that the url in the output CSS will look like this:
background-image: url(some_image.png)

This works okay on the development server, but it does _not_ work on the production server, because the image is not copied to the web root in the ng build output (it is copied to the assets subdirectory, as it should be).

[arntj]

Correction: The image _is_ copied to the root when doing ng build.

But the image is _not_ copied to the root when doing ng build --prod. This is where the problem lies at for me: I need to be able to build everything, drop it in an ASP.NET web application on an IIS server, and trust that all images in the assets subdirectory are correctly linked in the CSS. (Or at least, that all images linked are reachable on the server.)

[martinmcwhorter]

I am having the same/similar issue -- with no baseHref set.

In a component scss file I have the following:

  background: url('assets/profile-background.jpg');

When I do an ng build I get:

ERROR in ./src/app/xxxx/some.component.scss
Module not found: Error: Can't resolve './assets/profile-background.jpg' in 'C:\dev\xxxx\some\path'

[kunee]

relates to #4778

[filipesilva]

Dupe of #4778.

Please check out @clydin's great answer at https://github.com/angular/angular-cli/issues/4778#issuecomment-280773798 regarding exactly what happened.

[kingsolo50]

I used background: url(...); in the scss file to insert a background image instead of background-image: url(...); and it worked

[jevvilla]

@martinmcwhorter did you find any solution? I am having the same problem in a scss file

[Piyush247]

fhbgjtgyjhuyhj

[juanmonsalveh]

@maxpfandl it works for me... just modifying "../" to "./" at the resources ... so much thanks to you man :)

[Hojou]

Seems like the latest angular cli (v6) is not passing the base-href to the postcss, making postcss mess up the paths.

I can't prefix my urls with / or with ../ since both will mess up the path. The path needs to be relative since i have a base-href for my solution. The angular CLI already reads the base-href and uses it for parsing assets, everywhere except passing it to postcss.

Any paths inside .scss files will eventually work once the solution hits production, but in non prod builds, postcss will output errors/warnings since it does not know about the base-href

[Gil-Epshtain]

I see that this issue is closed but nobody provided a solution or a work around, so how do I solve it???

I have a styles.scss - which is the main application style file, it isn't related to any specific component, so specifying the path from the component's root isn't relevant here .
And I try to load a font from this file, with this code:
src: url("/assets/fonts/SomeFont-Regular.ttf");

This code working great in ng serve mode.
But when I deploy in to production with this line: ng build --prod --base-href="/app-name/" the font is missing (404 not found).

This happens because in production the browser is looking for the fonts at: www.my-server.com/assets/fonts/... instead of www.my-server.com/app-name/assets/fonts/....

So how do I solve this problem?? Does anyone has a work around????

P.S I try to change the url:
url("assets/...")
url("/assets/...")
url("./assets/...")
None work for me.

I'm running Angular 6.x

P.P.S
I had the same issue with images referenced from scss file with background-image: url(/assets/1.png) but I solve this by replacing all the scss references to a html references <img src="assets/1.png">.
However this work around will not work since I can't load FONTs from html.

[andremeirelesa]

This happens because the server that controls the requests redirects to your app only the requests that begins with /my-app, but /assets/image.jpg does not match that rule. So, as I didn't find a solution using the build tool (ng build), I prefered change the built files after the building.
I always do the following steps:

1. Access the output dir (dist by default)
2. Create a dir called my-app into dist
3. Move all the files from dist to dist/my-app (including assets and any others)
4. Edit index.html adding my-app prefix on resources paths as the code bellow:

<link rel="icon" type="image/x-icon" href="/my-app/favicon.ico">
...
<script type="text/javascript" src="/my-app/inline.c734668d9826e797bb20.bundle.js"></script>
<script type="text/javascript" src="/my-app/polyfills.f20484b2fa4642e0dca8.bundle.js"></script>
<script type="text/javascript" src="/my-app/scripts.aae0cbbd619232683a70.bundle.js"></script>
<script type="text/javascript" src="/my-app/main.6b0ab5797fa35e8c6617.bundle.js"></script>

1. Edit the main.*.bundle.js file replacing all ocurrences of assets for my-app/assets (on vim, use the command %s/assets/my-app\/assets/g

I know that It's not a ideal solution but it resolves until find a better alternative

[the-destro]

Looks like some of the webpack-isms work for this issue too, ie url('~../src/assets/foo.svg') worked for me

[andremeirelesa]

Looks like some of the webpack-isms work for this issue too, ie url('~../src/assets/foo.svg') worked for me

@the-destro What about the JS and CSS resources, once ng build is responsible for link then on index.html?

[WizardPC]

Same problem than @Gil-Epshtain

[lukaszmn]

In my case url("~src/assets/foo.svg") worked. As I see, every case is different ;).

[WizardPC]

In my case it was : src: url('~../src/assets/fonts/icomoon.eot?9ng3yy');

But i have remaining issue with fontawesome dependencie...

Failed to decode downloaded font: http://.....:8080/w8mcnt/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
OTS parsing error: invalid version tag

So i have square instead of icon. Link in the console worked. Any fix ?

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