问题描述
尝试将 ng2-material 与 Angular2(在 Visual Studio 中).
我不使用 NPM 包,而是使用 CDN/在线 参考可用/在此处显示
它不会从 ng2-material/all
导入任何东西,为什么?
您忘记在 SystemJS 中添加此配置:
System.config({转译器:'打字稿',打字稿选项:{emitDecoratorMetadata: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
模块成为可能.
这是 plunkr: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 集成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!