angular material 2 on quickstart rc5

Question

I've been using angular2 rc 5 with ngModule

So right now I wanna use angular material. For example I wanna use angular2 material sidenav. I've been install it using npm

npm i @angular2-material/sidenav

then I put that angular 2 material on my systemjs-config.js

const map: any = {
  '@angular2-material': 'vendor/@angular2-material'
};

after that I imported the angular material in my ngModule

@NgModule({
  imports: [MdButtonModule, MdCardModule],
  ...
})

but I got an error

http://localhost:3000/node_modules/@angular2-material/button/ 404 (Not Found)

is there some thing wrong with my code?

Answer 1

Your basic problem is that SystemJS doesn't know which file to import when it sees import {...} from '@angular2-material/button, so it tries to fetch the path that is returning the 404 error. To fix:

1 Confirm that the path http://localhost:3000/node_modules/@angular2-material/button/ contains the button.js file.

2 In your systemjs-config.js file, add the setting that tells SystemJS how to import your Material packages:

var ngMaterialPackageNames = [
    'button',
    'card',
    //... any other Material packages you use
];

//tells SystemJS what file to load when a package name is imported
ngMaterialPackageNames.forEach(function(pkgName) {
    packages['@angular2-material/'+pkgName] = {
         main: pkgName+'.js', defaultExtension: 'js'
    };
});
...
// then later, do (you probably already have these lines)
var config = {
    map: map,
    packages: packages
};
System.config(config);

Answer 2

I've finally found out how to load angluar material 2 with systemjs, and share this with you.

Get latest version(2.1.2) of ng2 from angular 2 quickstart, add these two in your package.json

 "@angular/material": "^2.0.0-alpha.9-3",
 "@types/hammerjs": "2.0.33"

Add to your systemjs.config.js

map: {
  // our app is within the app folder
  app: 'app',
    :
    '@angular/material': 'npm:@angular/material/material.umd.js',
    :

change your app.module.ts from

@NgModule({
      imports:      [ BrowserModule],

to :

 @NgModule({
      imports:      [ BrowserModule, MaterialModule.forRoot()],

Also you can add some css inside index.html. For more detail, pls see https://github.com/Longfld/ng2QuickStartForBeginning