Angular2 : trouble in integrating ng2-material

Question

I am trying to integrating ng2-material in Angular2

Uncaught SyntaxError: angular2-polyfills.js:138 Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/ng2-material/all

import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from 'ng2-material/all';

   @Component({

       template: `<md-content>
                 <button md-raised-button class="md-raised md-primary">Primary</button>
                 </md-content>`,
       styles: [style],
       providers:[ContactService, MATERIAL_PROVIDERS]
       directives:[MATERIAL_DIRECTIVES]
    })

 export class contact {
    constructor(){}
}

Answer 1

This is my config. It worked. You can try it.

System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-material': {
          defaultExtension: 'js'
       }
    },
    map: {
        'ng2-material': 'node_modules/ng2-material'
  },
});
System.import('app/main')
    .then(null, console.error.bind(console));

Answer 2

Using angular2-beta12 and ng2-material 0.3.4

I was having issues getting ng2-material to work as well.

The first thing i was missing in my index.html file was declaring the css.

<link rel="stylesheet" href="node_modules/ng2-material/dist/ng2-material.css">
<link rel="stylesheet" href="node_modules/ng2-material/dist/font.css">

After that one of the important things I found I was missing was the map information was nested inside the packages bracket. Once I moved it outside my System.config statement looks like this:

Index.html

System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            'ng2-material': {//this needs to be nested in packages
                defaultExtension: 'js'
            }
        },
        map: {//The map location needs to be located outside of the package bracket
            'ng2-material': 'node_modules/ng2-material'
        }


    });

    System.import('app/main')
            .then(null, console.error.bind(console));

Then in my main.ts file I import MATERIAL_PROVIDERS

Main.ts

import {MATERIAL_PROVIDERS} from "ng2-material/all";
import {AppComponent} from './app.component'


bootstrap(AppComponent, [MATERIAL_PROVIDERS]);

Lastly on the component that want to use the ng2-material on I imported MATERIAL_DIRECTIVES

create.component.ts

import {Component} from 'angular2/core';
import {RouterOutlet} from 'angular2/router';
import {MATERIAL_DIRECTIVES} from "ng2-material/all";



@Component({
   templateUrl: 'app/templates/create.html',
   directives: [RouterOutlet, MATERIAL_DIRECTIVES]

})
export class CreateComponent {...component code}