Why Angular does not correctly support files that are in /?

Question

I am new in Angular 2+, I'm already working with on an app, using Angular version 4, I used CLI to create the project and also to serve it.

I am trying to add manifest.json into my project, and also I tried to add a favicon, here is my code:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">

I added both files in src/ which is the root of the Angular app. When I open the app on a browser, the favicon is not showing (404) and the manifest is also not found (404).

When I put the favicon into another directory (src/assets/icon/), it worked as expected, but for manifest.json, it should be in the root.

What Angular is doing is very wired for me, when I press Ctrl+U on Chrome to browse the web page source code when I click on the favicon.ico or manifest.json link on the HTML page, it shows me the index.html of the Angular.

Why is this happening?

How can I add my manifest.json and favicon.ico beside inside the src/ and also access them?

Answer 1

You just need to define your resources in your .angular-cli.json file found in the root of your project.

In apps[0].assets you can add files for the CLI to include in the bundle. Just select the path relative from the src/ directory. I've included one I have for a project of mine as reference. (Lines 10-14 are what you should look at)