Question

我一直在使用angular2 rc 5和ngModule

所以现在我想使用棱角分明的材料。例如，我想使用angular2材料sidenav。我一直用npm

安装它

npm i @ angular2-material / sidenav

然后我把那个有角度的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 （未找到）

我的代码有问题吗？

Answer 1

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

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

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

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);

Answer 2

我终于找到了如何用systemjs加载angluar材料2，并与你分享。

从angular 2 quickstart获取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

快速启动rc5上的角度材料2

2 个答案: