2016-03-04 29 views
0

的問題試圖NG2材料Angular2在Visual Studio)進行整合。
我不使用NPM包,而我用CDN /在線參考/可這裏http://plnkr.co/edit/d83ZQIAemyA40OhE3vYI?p=preview整合NG2的材料與Angular2

我的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> 

啓動。 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] 
}) 

... 
... 

enter image description here

它不會從ng2-material/all輸入任何東西,爲什麼呢?

回答

0

你忘了在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' 
    } 
}); 

這將有可能導入ng2-material/all模塊。

這是plunkr:https://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview