Angular 4 Error loading component

Question

I was hoping to use the ng4-material-dropdown and installed the package as instruced by calling npm install ng4-material-dropdown --save from my project's root folder. While I can confirm this folder exists inside /node-components, importing it in my app.module.ts throws an error.

Import
import { Ng4DropdownModule } from 'ng4-material-dropdown';

Error

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng4-material-dropdown patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:30 ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:424:17 Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:191:28 ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:486:28 Error loading http://localhost:3000/ng4-material-dropdown as "ng4-material-dropdown" from http://localhost:3000/app/app.module.js Stack trace: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng4-material-dropdown patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:30 ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:424:17 Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:191:28 ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:486:28 Error loading http://localhost:3000/ng4-material-dropdown as "ng4-material-dropdown" from http://localhost:3000/app/app.module.js

This is probably a very rooky mistake, but I can't for the life of me figure this one out.

bgraham bgraham · Accepted Answer · 2017-09-22T19:46:19

If you generated the app with the angular cli, you should have an angular.cli.json. It has a list of external vender scripts to package in. Its nested in apps.scripts. Try adding it something like this:

{
  //stuff
  "apps": [
    {
       //Here it is
      "scripts": [
        "ng4-material-dropdown"
      ]
   }
  ],
  //more stuff
}

Angular 4 Error loading component

1 Answers