Solvedangular cli CSS images with relative path not included in production build

Please provide us with the following information:

OS?

Windows 10

Versions.

1.0.0-beta.32.3

Repro steps.

1. Create new app with ng new.
2. Add an image anywhere outside the app directory, e.g. in the assets directory.
3. Reference this image from the app.component.css, using a relative path.
   Example: background-image: url(../assets/some_image.png)
4. Do the following: ng build --prod.
5. Verify that the image is not copied along with the CSS in the build output, meaning the image reference is now broken.

The log given by the failure.

N/A

Mention any other details that might be useful.

The image is correctly copied if doing ng build without the --prod switch.

---

Thanks! We'll be in touch soon.

This seems to be related with AoT.

Workarounds for now:

• use ng build --prod --no-aot
• use an absolute path for the image (starting with /)

I can verify this happens:

• touch ./src/assets/img.svg (using svg here because it always loads as a file regardless of size)
• add h1 { background-image: url(../assets/img.svg) } to ./src/app/app.component.css
• ng build
• verify ./dist/img.svg exists and it's referenced in ./dist/main.bundle.js
• ng build --prod
• verify ./dist/img.[hash].svg does NOT exist but it's referenced in ./dist/main.[hash].bundle.js

Will investigate.

In my case, cause I use base-href './' the workaround is as follows:

• use ng build --prod --no-aot --base-href ./
• use a relative path to the images folder (i.e. ../assets/images/img.*)

Hey guys! I'm new to angular and I'm facing the same problem in my app where the local version works perfectly great whereas the github deployment breaks all the URLs for images. My images are placed in src/assets/xyz.jpg directory and I have tried changing the base href as well as my image url and still the image appears to be broken.

I'm using angular 6. Would be really thankful if I get my issue sorted out.

Thanks in advance.

No news on this issue? I am seeing the same thing on Angular 6. Building on Unix seems to be broken, but strangely, I never have the issue when building on Windows.

Oddly enough, when I reference assets in this fashion:

url("/assets/myimage.jpg")

instead of

url("../../../assets/myimage.jpg")

it works fine locally, and during my unix production build.