angular-cli: Assets not working after update

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Windows 10

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here: @angular/cli: 1.0.0-rc.1 node: 7.4.0 os: win32 x64 @angular/common: 2.4.9 @angular/compiler: 2.4.9 @angular/core: 2.4.9 @angular/forms: 2.4.9 @angular/http: 2.4.9 @angular/platform-browser: 2.4. @angular/platform-browser-dynam @angular/router: 3.4.9 @angular/compiler-cli: 2.4.9

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc. The app was created with Angular-CLI

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I have several images in my src/assets folder. In the html for different components I used to reference them like this: href="/assets/some-name.ico". This worked before the update. Now it expects a folder src/assets in the dist folder. Not sure what’s wrong. In the angular-cli I have this:

      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],

Thanks! We’ll be in touch soon.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 23 (2 by maintainers)

Most upvoted comments

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.

+10

demiahmed on Jul 9, 2018

Hmmm - it seems if I run this using ng serve --base-href / then it all works as expected.

Why do I need to specify the --base-href parameter now?

Mufasa on Apr 13, 2017

Running into the same issue and I even found a bug. To reproduce, lets assume I have an image assets/img.jpg and would like to deploy the application here: https://x.org/webapp/. To display the image in a template via HTML and HTML5 navigation, I need to use <img src="/webapp/assets/img.jpg">.

With the following command the build works on the target URL: ng build --prod --aot --deploy-url webapp --base-href webapp.

Now I would expect to be able to serve my app in similar conditions via ng serve --base-href webapp, but all files are served from the root directory:

...
          vendor.bundle.js.map    4.78 MB    3, 4  [emitted]         vendor
          inline.bundle.js.map    5.83 kB       4  [emitted]         inline
                assets/img.jpg    2.06 MB          [emitted]  [big]  
                   favicon.ico    15.1 kB          [emitted]         
                    index.html  666 bytes          [emitted]

Adding the --deploy-url parameter does not change this behaviour.

As a result, the image is broken on the development server, or worse: if the image works on the development server, it will be broken in production!

⁄Found bug:/ When you run ng serve --base-href webapp and access http:/localhost:4200 you will be redirected http://0.0.0.0:4200/webapp/ and your app works. If you hit refresh immediately, the page is broken with following logs in the console:

GET http://0.0.0.0:4200/webapp/inline.bundle.js [HTTP/1.1 404 Not Found 7ms]
GET http://0.0.0.0:4200/webapp/polyfills.bundle.js [HTTP/1.1 404 Not Found 7ms]
...

Workaround: ng serve --base-href /webapp --deploy-url / (note the slash in --base-href!)

mmmichl on Mar 10, 2017

@demiahmed > in developer tools you can see why… It is because the path to your images is wrong. All of your files are downloaded from for example localhost/AngularApp/ so your images are on localhost/AngularApp/assets … but unfortunately, the browser looks for them on localhost/assets and that’s why it doesn’t get anything.

solution:

save img URL in this format: ‘./assets/fries.png’

PavelFranta on Oct 29, 2018

I had this problem as well. For me ng serve --base-href / did not help. Instead it turns out, in my .angular-cli.json i was not specifying assets as an array.

Changing from:

assets: "assets" to assets: ["assets"] fixed it for me.

Assets without the array worked before the upgrade from beta 17 to 1.0.1. Perhaps the upgrade guide could be upgraded to indicate assets must now be an array if in fact that is the case.

NoopDog on May 2, 2017

Hello everyone, I have the exact same issue despite the fact that my angular CLI version is the latest, I can’t find a way out since days. Can someone help me with this ?

jas75 on Aug 28, 2017