0

我一直在使用 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（未找到）

我的代码有问题吗？

4

2 回答 2

0

您的基本问题是 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);
于 2016-09-01T05:43:00.650 回答
0

终于知道怎么用systemjs加载角度素材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

于 2016-11-03T22:19:14.857 回答