angularmaterial-design-lite

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


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


Solution

  • 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"
          ],