Assets not working after update

[FunnyGhost]

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.

[sumitarora]

@FunnyGhost When running ng serve it runs dist in memory and serves assets from dist\assets directory. When running ng serve --verbose Do you see file being added in memory as below(angular.svg)?

   styles.bundle.js.map    13.4 kB    2, 4  [emitted]         styles
   vendor.bundle.js.map    3.45 MB    3, 4  [emitted]         vendor
   inline.bundle.js.map    5.82 kB       4  [emitted]         inline
     assets/angular.svg  899 bytes          [emitted]
            favicon.ico    5.43 kB          [emitted]
             index.html  608 bytes          [emitted]
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 155 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.66 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]

[FunnyGhost]

@sumitarora It does shows that the files are added in memory.
So, now I use <img src="assets/image.png"> and it works on build --prod but it doesn't work on ng serve.
If I use <img src="/assets/image.png"> it works on build --prod but it doesn't work locally
If I use <img src="src/assets/image.png"> it doesn't work on build --prod but it does work locally

[mmmichl]

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!)

[Mufasa]

I am suffering the same issue. I was on angular-cli 1.0.0-beta.26 and spent the whole day reading all the release notes and update notes to upgrade to 1.0.0.

When I run ng serve or even ng serve -prod --aot, my site now fails to load any of the images from my src/assets folder - example error:

GET http://localhost:4200/assets/img/logo.png 404 (Not Found)

If I copy this URL and paste it in a new browser tab then it just redirects me back to the home page of my app. If I paste it and then change the URL to:

http://localhost:4200/src/assets/img/logo.png

then it correctly fetches the image. Note I added /src as a prefix to the /assets path above.

If I build it using ng build --prod --aot and put the distribution onto my production server then all assets are delivered correctly.

My index.html contains this in <head> section:

<base href="/">

apps section from my .angular-cli.json file:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

In case it is of some use, here is the output I get from running ng serve --verbose:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 7.9.0
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/platform-server: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2
DanyaliMac:go2travel-ng-cli anjum$ ng serve --verbose
** NG Live Development Server is running on http://localhost:4200 **
20518ms building modules                                                                  
67ms sealing
10ms optimizing
1ms basic module optimization 
0ms module optimization 
95ms advanced module optimization
41ms basic chunk optimization       
0ms chunk optimization 
7ms advanced chunk optimization 
1ms module and chunk tree optimization 
0ms module reviving 
72ms module order optimization
6ms module id optimization 
0ms chunk reviving 
3ms chunk order optimization 
15ms chunk id optimization
80ms hashing
1ms module assets processing 
209ms chunk assets processing
5ms additional chunk assets processing 
1ms recording 
0ms additional asset processing 
7749ms chunk asset optimization
26ms asset optimization
1278ms emitting
Hash: 766c8962ed5cd2451bf8
Version: webpack 2.2.1
Time: 30213ms
                                                     Asset       Size  Chunks                    Chunk Names
                        assets/img/angularclass-avatar.png    32.8 kB          [emitted]         
                                            main.bundle.js     901 kB    0, 4  [emitted]  [big]  main
                                          styles.bundle.js      36 kB    2, 4  [emitted]         styles
                                          vendor.bundle.js    6.15 MB    3, 4  [emitted]  [big]  vendor
                                          inline.bundle.js    5.76 kB       4  [emitted]         inline
                                        main.bundle.js.map    1.02 MB    0, 4  [emitted]         main
                                   polyfills.bundle.js.map     259 kB    1, 4  [emitted]         polyfills
                                      styles.bundle.js.map    44.4 kB    2, 4  [emitted]         styles
                                      vendor.bundle.js.map    7.16 MB    3, 4  [emitted]         vendor
                                      inline.bundle.js.map    5.82 kB       4  [emitted]         inline
                                          assets/.DS_Store    6.15 kB          [emitted]         
                                         assets/.npmignore    0 bytes          [emitted]         
                                      assets/doc/.DS_Store    6.15 kB          [emitted]         
                             assets/doc/Policy Summary.pdf    1.44 MB          [emitted]  [big]  
                             assets/doc/Policy Wording.pdf    3.78 MB          [emitted]  [big]  
                                      assets/img/.DS_Store    6.15 kB          [emitted]         
                               assets/img/angular-logo.png      19 kB          [emitted]         
                                       polyfills.bundle.js     213 kB    1, 4  [emitted]         polyfills
                          assets/img/angularclass-logo.png    36.7 kB          [emitted]         
                                 assets/img/background.jpg     167 kB          [emitted]         
                              assets/img/comodo 100x61.png    9.59 kB          [emitted]         
                              assets/img/favicon-16x16.png  626 bytes          [emitted]         
                              assets/img/favicon-32x32.png    1.43 kB          [emitted]         
                                    assets/img/favicon.png    1.46 kB          [emitted]         
                                assets/img/logo 166x73.png    7.48 kB          [emitted]         
                              assets/img/mapfre 100x18.png    2.56 kB          [emitted]         
assets/img/reason - comprehensive travel cover 200x191.png    30.5 kB          [emitted]         
         assets/img/reason - flexible solutions 200x73.png    18.7 kB          [emitted]         
assets/img/reason - friendly customer services 200x189.png    20.3 kB          [emitted]         
         assets/img/reason - medical screening 200x181.png    34.9 kB          [emitted]         
                            assets/img/sage pay 100x74.png    13.7 kB          [emitted]         
                          assets/img/uk-general 100x28.png    5.97 kB          [emitted]         
                                       assets/js/frames.js  132 bytes          [emitted]         
                                                index.html  928 bytes          [emitted]         
chunk    {0} main.bundle.js, main.bundle.js.map (main) 771 kB {3} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 35.8 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.75 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  3.33 kB       0  
    chunk    {0} index.html 671 bytes [entry] [rendered]
webpack: Compiled successfully.

[Mufasa]

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?

[NoopDog]

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.

[filipesilva]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[jas75]

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 ?

[jvnicholson]

@jas75 i used the latest angular CLI (v1.4.1) and was still having the issue. Doing @NoopDog suggestion worked ("assets" ==> ["assets"])

[jas75]

@jvnicholson It's already set