快速入门rc5上的角材2 [英] angular material 2 on quickstart rc5

问题描述

我一直在使用ngModule的angular2 rc 5

I've been using angular2 rc 5 with ngModule

所以现在我要使用角形材料.例如，我想使用angular2材料sidenav.我已经使用npm

So right now I wanna use angular material. For example I wanna use angular2 material sidenav. I've been install it using npm

npm i @ angular2-material/sidenav

npm i @angular2-material/sidenav

然后我将那个角度2的材料放到我的systemjs-config.js中

then I put that angular 2 material on my systemjs-config.js

const map: any = {
  '@angular2-material': 'vendor/@angular2-material'
};

之后，我将角形材料导入了ngModule

after that I imported the angular material in my ngModule

@NgModule({
  imports: [MdButtonModule, MdCardModule],
  ...
})

但我遇到了错误

http://localhost:3000/node_modules/@ angular2-material/button/ 404 (未找到)

http://localhost:3000/node_modules/@angular2-material/button/ 404 (Not Found)

我的代码有问题吗?

推荐答案

我终于找到了如何使用systemjs加载Angluar材质2并与您共享.

I've finally found out how to load angluar material 2 with systemjs, and share this with you.

从angular 2快速入门获取ng2的最新版本(2.1.2)， 将这两个添加到package.json

Get latest version(2.1.2) of ng2 from angular 2 quickstart, add these two in your package.json

 "@angular/material": "^2.0.0-alpha.9-3",
 "@types/hammerjs": "2.0.33"

添加到您的systemjs.config.js

Add to your systemjs.config.js

map: {
  // our app is within the app folder
  app: 'app',
    :
    '@angular/material': 'npm:@angular/material/material.umd.js',
    :

从

@NgModule({
      imports:      [ BrowserModule],

至:

 @NgModule({
      imports:      [ BrowserModule, MaterialModule.forRoot()],

还可以在index.html中添加一些CSS.有关更多详细信息，请参见 https://github.com/Longfld/ng2QuickStartForBeginning

Also you can add some css inside index.html. For more detail, pls see https://github.com/Longfld/ng2QuickStartForBeginning

这篇关于快速入门rc5上的角材2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！