CODEWITHSUNDEEP
angularwebpackangular-cliprogressive-web-apps
TypeScript Learner
TypeScript Learner

Reputation: 195

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

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?

Upvotes: 4

Views: 6688

Answers (2)

Tim Rasim
Tim Rasim

Reputation: 684

Correct answer for angular 12+ (probably works starting from angular 6+)

Assets are now configured in angular.json under projects -> YOUR_NAME -> architect -> build -> options -> assets and support string or object values. Object values allow you to add files from the assets folder but move them to root which is required for files such as the manifest.json.

  "assets": [
    "src/assets",
    {
      "glob": "**/*",
      "input": "src/assets/favicons",
      "output": "."
    }
  ],

glob: which files to select (**/* -> all) inout: in which folder to look for the files output: in which file should they be copied for dist

Have a look at the official documentation for more information: https://angular.io/guide/workspace-config#assets-configuration

Upvotes: 2

MichaelSolati
MichaelSolati

Reputation: 2872

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)

Upvotes: 10

Related Questions