ng2-material 与 Angular2 的集成问题

Question

尝试将 ng2-material 与 Angular2[=44 集成=]（在Visual Studio）。
我不使用 NPM 包，而是使用 CDN/online 参考 available/shown 这里 http://plnkr.co/edit/d83ZQIAemyA40OhE3vYI?p=preview

我的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] }) ... ...

它没有从 ng2-material/all 导入任何东西，为什么？

Answer 1

您忘记在 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.

ng2-material 与 Angular2 的集成问题

integrating issue of ng2-material with Angular2

angular-material

angular