Question

尝试将 ng2-material 与 Angular2 集成在一起（在Visual Studio中 ）。
我不使用NPM软件包，而是使用 CDN /在线 参考资料/此处显示 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集成在一起

1 个答案: