Angular2: ng2 material integration issue

Question

I am trying to integrate ng2 stuff in Angular2

Not prepared SyntaxError: angular2 -polyfills.js: 138 Not clear SyntaxError: Unexpected token <Evaluation 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 configuration. It worked. You can try.

 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'm having trouble working with ng2 stuff.

The first thing I lost in my index.html file was declaring 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 that I found that I was missing was the map information nested inside the package bracket. As soon as I moved it outside of my System.config statement, it 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]); 

Finally, on a component that wants to use ng2 material, 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} 

Answer 3

If it cannot find the library for you, try npm install again.

Otherwise, if you are sure that you have installed the library, download it, add it to your index.html :

 <script> System.config({ defaultJSExtensions: true, packages: { "/angular2": {"defaultExtension": false} }, map: { 'ng2material': 'node_modules/ng2material' } }); </script> 

Answer 4

I think you can try this configuration in your HTML file:

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

Hope this helps you, Thierry

Answer 5

I use:

 <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script> System.defaultJSExtensions = true; </script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <link rel="stylesheet" href="node_modules/ng2-material/dist/ng2-material.css"> <link rel="stylesheet" href="node_modules/ng2-material/dist/font.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { 'ng2-material': 'node_modules/ng2-material/source' } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> 

As noted in the above comment, including writing a package for ng2 material gives an error that is not set. I don't know if setting defaultJSExtensions is critical, but it needs to be done, and for me it works in that order.

Answer 6

Just use import {MATERIAL_PROVIDERS} from the "ng2 material";

remove "/ all"