Angular Material 2: Not found error

Question

I installed Angular cli globally and then Angular material 2.

I configured angular-cli-build.js & system-config.ts as below.

angular-cli-build.js

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
 return new Angular2App(defaults, {
 vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/**/*.+(js|js.map)',
  'es6-shim/es6-shim.js',
  'reflect-metadata/**/*.+(ts|js|js.map)',
  'rxjs/**/*.+(js|js.map)',
  '@angular/**/*.+(js|js.map)',
  '@angular2-material/**/*'
]
});
};

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
'@angular2-material': 'vendor/@angular2-material'
};

/** User packages configuration. */
const components = [
'button',
'card'
];

/** User packages configuration. */
const packages: any = {
'@angular2-material/core': {
format: 'cjs',
defaultExtension: 'js'
},
// Set the default extension for the root package, because otherwise the      demo-app can't
// be built within the production mode. Due to missing file extensions.
'.': {
defaultExtension: 'js'
}
};
components.forEach(name => {
packages[`@angular2-material/${name}`] = {
format: 'cjs',
defaultExtension: 'js'
};
});

And then in app-component.ts I imported angular material button as below.

import { MdButtonModule } from '@angular2-material/button';

directives: [MdButtonModule]

When I run the application following error is showing in browser console.

GET http://localhost:4200/vendor/@angular2-material/button 404 (Not     Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @     zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @     zone.js:122send @ VM3369:3fetchTextFromURL @ system.src.js:1154(anonymous     function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function)     @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous  function) @ system.src.js:3333(anonymous function) @  system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function)  @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous   function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @   zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @  zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @  zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found)  loading http://localhost:4200/vendor/@angular2-material/button
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
    at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/vendor/@angular2-material/button as "@angular2-material/button" from http://localhost:4200/app/app.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular2-material/button(…)consoleError @ zone.js:461_loop_1 @     zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular2-material/button(…)

Then I tried by changing

import { MdButtonModule } from '@angular2-material/button'; 

to following

import { MdButtonModule } from '@angular2-material/button/button';

It gives following error.

        zone.js:461 Unhandled Promise rejection: TypeError: core_1.NgModule is not a function
            at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:168:16)
            at Object.eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:175:2)
            at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:178:4)
            at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:179:3)
        Evaluating http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js
        Evaluating http://localhost:4200/vendor/@angular2-material/button/button.js
        Evaluating http://localhost:4200/app/app.component.js
        Evaluating http://localhost:4200/app/index.js
        Evaluating http://localhost:4200/main.js
        Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: TypeError: core_1.NgModule is not a function(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
    zone.js:463 Error: Uncaught (in promise): Error: TypeError: core_1.NgModule is not a function(…)

My package.json looks like

        {
      "name": "sec-project",
      "version": "0.0.0",
      "license": "MIT",
      "angular-cli": {},
      "scripts": {
        "start": "ng serve",
        "postinstall": "typings install",
        "lint": "tslint \"src/**/*.ts\"",
        "test": "ng test",
        "pree2e": "webdriver-manager update",
        "e2e": "protractor"
      },
      "private": true,
      "dependencies": {
        "@angular/common": "2.0.0-rc.4",
        "@angular/compiler": "2.0.0-rc.4",
        "@angular/core": "2.0.0-rc.4",
        "@angular/forms": "0.2.0",
        "@angular/http": "2.0.0-rc.4",
        "@angular/platform-browser": "2.0.0-rc.4",
        "@angular/platform-browser-dynamic": "2.0.0-rc.4",
        "@angular/router": "3.0.0-beta.2",
        "es6-shim": "0.35.1",
        "reflect-metadata": "0.1.3",
        "rxjs": "5.0.0-beta.6",
        "systemjs": "0.19.26",
        "zone.js": "0.6.12",
        "@angular2-material/button": "^2.0.0-alpha.6",
        "@angular2-material/button-toggle": "^2.0.0-alpha.6",
        "@angular2-material/card": "^2.0.0-alpha.6",
        "@angular2-material/checkbox": "^2.0.0-alpha.6",
        "@angular2-material/core": "^2.0.0-alpha.6",
        "@angular2-material/grid-list": "^2.0.0-alpha.6",
        "@angular2-material/icon": "^2.0.0-alpha.6",
        "@angular2-material/input": "^2.0.0-alpha.6",
        "@angular2-material/list": "^2.0.0-alpha.6",
        "@angular2-material/menu": "^2.0.0-alpha.6",
        "@angular2-material/progress-bar": "^2.0.0-alpha.6",
        "@angular2-material/progress-circle": "^2.0.0-alpha.6",
        "@angular2-material/radio": "^2.0.0-alpha.6",
        "@angular2-material/sidenav": "^2.0.0-alpha.6",
        "@angular2-material/slide-toggle": "^2.0.0-alpha.6",
        "@angular2-material/slider": "^2.0.0-alpha.6",
        "@angular2-material/tabs": "^2.0.0-alpha.6",
        "@angular2-material/toolbar": "^2.0.0-alpha.6",
        "@angular2-material/tooltip": "^2.0.0-alpha.6"
      },
      "devDependencies": {
        "angular-cli": "1.0.0-beta.10",
        "codelyzer": "0.0.20",
        "ember-cli-inject-live-reload": "1.4.0",
        "jasmine-core": "2.4.1",
        "jasmine-spec-reporter": "2.5.0",
        "karma": "0.13.22",
        "karma-chrome-launcher": "0.2.3",
        "karma-jasmine": "0.3.8",
        "protractor": "3.3.0",
        "ts-node": "0.5.5",
        "tslint": "3.11.0",
        "typescript": "1.8.10",
        "typings": "1.3.1"
      }
    }

My Angular cli version is 1.0.0-beta.10

Answer 1

For me it was the string parsing; it never resolved ${name}:

packages[`@angular2-material/${name}`]

...so SystemJS couldn't look up the material packages correctly.

I have since updated that part of System config with the following:

const materialPackages:string[] = [
  'core',
  'card',
  'button',
  'sidenav',
  'toolbar'
  // etc
];
const packages:any = createCustomConfig(materialPackages);
  function createCustomConfig(packages: string[]): any {
    return packages.reduce((packageConfig: any, packageName: string) => {
      packageConfig['@angular2-material/'+packageName] = {
        format: 'cjs',
        defaultExtension: 'js',
        main: packageName
      };
      return packageConfig;
    }, {});
};

BONUS:

I also created a layout module that I import into the app module:

layout.module.ts

 import { NgModule }      from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MdCoreModule } from '@angular2-material/core';
 import { MdSidenavModule } from '@angular2-material/sidenav';
 import { MdToolbarModule } from '@angular2-material/toolbar';
 import { MdCardModule } from '@angular2-material/card';
 import { MdButtonModule } from '@angular2-material/button';
 @NgModule({
   imports: [
     CommonModule, MdCoreModule, MdSidenavModule, MdToolbarModule, MdCardModule, MdButtonModule],
   exports: [MdCoreModule, MdSidenavModule, MdToolbarModule, MdCardModule, MdButtonModule]
 })
 export class LayoutModule { }