angularangular-material

Angular 19 - ng serve not serving assets?


I have newly started project in Angular 19 with default setting and just a few simple components. I'm trying to add picture in one place, created public folder at /src as it was missing and apparently this is new folder instead of assets. Full path to image is src/public/radom.webp

Referenced it in template like this: <img mat-card-image ngSrc="/radom.webp" alt="Sad railroad" height="1024" width="1024"/> and it does not load, url localhost:4200/radom.webp returns 404 error.

Tried also:

ngSrc="radom.webp"
ngSrc="/public/radom.webp"
ngSrc="public/radom.webp"
ngSrc="assets/radom.webp"
ngSrc="/assets/radom.webp"
ngSrc="src/radom.webp"
ngSrc="/src/radom.webp"
ngSrc="src/public/radom.webp"
ngSrc="/src/public/radom.webp"
ngSrc="radom"

and with src attribute, all of that above returns 404.

angular.json is unmodified, as it was generated by angular/cli:

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
]

Restarted ng serve, cleared cache, nothing. Seriously running out of ideas, even throwing more or less random words and chat-gpt did not produce any usefull solution or even idea.

In previous versions with assets folder it just worked every single time...


Solution

  • Here’s my revised attempt in Angular 19:

    This is the file path: src/public/background.png

    <img src="/background.png" alt="Sad railroad" height="1024" width="1024"/>
    

    You need to modify the configuration in angular.json as follows:

    "assets": [
      {
        "glob": "**/*",
        "input": "src/public" <-- Change this part
      }
    ]
    

    When using the glob pattern like above, it will copy all files from src/public to the root of the output directory (e.g., dist/), so you can reference the image as /background.png.

    However, if you use this configuration instead:

    "assets": [
      "src/public"
    ]
    

    The files will be copied to the public folder in the output directory (e.g., dist/public/), and you’ll need to adjust the image tag to:

    <img src="/public/background.png" alt="Sad railroad" height="1024" width="1024"/>