Failed to Load Resource (404 Error) (Material Design Lite)

Question

Just beginning work on my first Angular 2 application but I am running into some issues.

My IDE is WebStorm & I generated the project with the Angular CLI

My problem occurs when trying to use Material Design Lite.

I've imported the three dependencies in my index.html:

<link rel="stylesheet" href="../../node_modules/material-design-lite/material.min.css">
<script src="../../node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="../../node_modules/material-design-icons/iconfont/material-icons.css">

However after calling ng-serve, in the browser all three result in a failed to load resource error.

Any ideas on how to resolve this?

NOTE: index.html is in the app folder, located in the src folder in my project folder

Answer 1

You should not reference the dependencies that way. you should install them using

npm i material-design-lite

and then in your angular-cli.json you add it to styles or scripts.

i.e.

{
  "project": {
    "version": "1.0.0-beta.16",
    "name": "test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
         "../node_modules/material-design-lite/material.min.css",
          "../node_modules/material-design-icons/iconfont/material-icons.css"

      ],
      "scripts": [
        "../node_modules/material-design-lite/material.min.js"
      ],