title: integrating issue of ng2-material with Angular2
body: <p>trying to integrate <strong><em>ng2-material</em></strong> with <strong><em>Angular2</em></strong> (<em>in Visual Studio</em>). <br>I don't use NPM packages rather I use <strong><em>CDN/online</em></strong> reference available/shown here <strong><a href="http://plnkr.co/edit/d83ZQIAemyA40OhE3vYI?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/d83ZQIAemyA40OhE3vYI?p=preview</a></strong></p>
  
  <p><strong><em>My index.html</em></strong>,</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/ng2-material.css" /&gt;
      &lt;link rel="stylesheet" href="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/dist/font.css" /&gt;
      &lt;script src="https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-shim.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-polyfills.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/Rx.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/router.dev.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/http.dev.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          System.config({
              transpiler: 'typescript',
              typescriptOptions: { emitDecoratorMetadata: true },
              packages: { 'src': { defaultExtension: 'ts' } }
          });
  
          System.import('Angular/src/boot.ts')
                .then(null, console.error.bind(console));
      &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>boot.ts</em></strong></p>
  
  <pre><code>...
  ...
  import {MATERIAL_PROVIDERS} from 'ng2-material/all';
  
  bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,
                              HTTP_PROVIDERS,
                              AuthService,
                              MATERIAL_PROVIDERS,
                              provide(LocationStrategy, {useClass: HashLocationStrategy});
  </code></pre>
  
  <p><strong><em>Home.ts</em></strong></p>
  
  <pre><code>...
  ...
  
  import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
  @Component({
          templateUrl:'/ANGULAR/src/Home/Home.html',
          directives: [MATERIAL_DIRECTIVES]
  })
  
  ...
  ...
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/scbXs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/scbXs.png" alt="enter image description here"></a></p>
  
  <p>It doesn't import anything from <code>ng2-material/all</code>, why? </p>