将ng2-material问题与Angular2集成 [英] integrating issue of ng2-material with Angular2

问题描述

尝试将 ng2-material 与 Angular2 (在Visual Studio中为 ).
我不使用NPM软件包，而是使用 CDN/online 参考可用/此处显示

它没有从 ng2-material/all 导入任何内容，为什么?

解决方案

您忘记在SystemJS中添加此配置:

  System.config({transpiler:'打字稿'，typescriptOptions:{embedDecoratorMetadata:true}，套餐:{'src':{defaultExtension:'ts'}，'ng2-material':{defaultExtension:'js'}}，地图: {'ng2-material':'https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material'}}); 

这将使导入 ng2-material/all 模块成为可能.

这是插件: https://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview.

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?

解决方案

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.

这篇关于将ng2-material问题与Angular2集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！