integrating issue of ng2-material with Angular2

Question

trying to integrate ng2-material with Angular2 (in Visual Studio).
I don't use NPM packages rather I use CDN/online reference available/shown here http://plnkr.co/edit/d83ZQIAemyA40OhE3vYI?p=preview

My index.html,

    <link rel="stylesheet" href="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/ng2-material.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/font.css" />
    <script src="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/node_modules/es6-shim/es6-shim.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-shim.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-polyfills.min.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/Rx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/router.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/http.dev.js"></script>

    <script>

        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: { 'src': { defaultExtension: 'ts' } }
        });

        System.import('Angular/src/boot.ts')
              .then(null, console.error.bind(console));
    </script>

boot.ts

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

bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,
                            HTTP_PROVIDERS,
                            AuthService,
                            MATERIAL_PROVIDERS,
                            provide(LocationStrategy, {useClass: HashLocationStrategy});

Home.ts

...
...

import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
@Component({
        templateUrl:'/ANGULAR/src/Home/Home.html',
        directives: [MATERIAL_DIRECTIVES]
})

...
...

It doesn't import anything from ng2-material/all, why?

Answer 1

You forgot to add this configuration in SystemJS:

System.config({
  transpiler: 'typescript',
  typescriptOptions: { emitDecoratorMetadata: true },
  packages: {
    'src': { defaultExtension: 'ts' },
    'ng2-material': {defaultExtension: 'js'}
  },
  map: {
    'ng2-material': 'https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material'
  }
});

This will make possible to import the ng2-material/all module.

Here is the plunkr: https://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview.