快速入门 rc5 上的角材料 2答案

【问题标题】：angular material 2 on quickstart rc5快速入门 rc5 上的角材料 2
【发布时间】：2016-09-01 03:43:29
【问题描述】：

我一直在使用 angular2 rc 5 和 ngModule

所以现在我想使用有角度的材料。例如，我想使用 angular2 材质 sidenav。我一直在使用 npm 安装它

npm i @angular2-material/sidenav

然后我将那个 angular 2 材料放在我的 systemjs-config.js 上

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

之后我在我的 ngModule 中导入了角度材质

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

但我遇到了错误

http://localhost:3000/node_modules/@angular2-material/button/404 （未找到）

我的代码有问题吗？

【问题讨论】：

您可能在systemjs-config.js 中缺少packages 配置，有关详细信息，请参阅this 和this 链接。

标签： angular angular2-material

【解决方案1】：

您的基本问题是 SystemJS 在看到 import {...} from '@angular2-material/button 时不知道要导入哪个文件，因此它会尝试获取返回 404 错误的路径。修复：

1确认路径http://localhost:3000/node_modules/@angular2-material/button/包含button.js文件。

2在您的 systemjs-config.js 文件中，添加告诉 SystemJS 如何导入您的 Material 包的设置：

var ngMaterialPackageNames = [
    'button',
    'card',
    //... any other Material packages you use
];

//tells SystemJS what file to load when a package name is imported
ngMaterialPackageNames.forEach(function(pkgName) {
    packages['@angular2-material/'+pkgName] = {
         main: pkgName+'.js', defaultExtension: 'js'
    };
});
...
// then later, do (you probably already have these lines)
var config = {
    map: map,
    packages: packages
};
System.config(config);

【讨论】：

谢谢，我已经试过了，但我又遇到了一个错误localhost:3000/node_modules/@angular2-material/core/annotations/…404 (Not Found) 是一样的吗？

【解决方案2】：

终于知道怎么用systemjs加载角度素材2了，分享给大家。

从 Angular 2 快速入门获取 ng2 的最新版本（2.1.2），在你的 package.json 中添加这两个

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

添加到您的 systemjs.config.js

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

从

更改您的 app.module.ts

@NgModule({
      imports:      [ BrowserModule],

到：

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

您还可以在 index.html 中添加一些 CSS。更多详情请见https://github.com/Longfld/ng2QuickStartForBeginning

【讨论】：