我有一个应用程序加载Angular 2.0.0，即所有rc版本之后的9/14/16版本。我正在尝试添加Angular Material2，这是Google团队发布的官方MD版本。我是从他们的入门网站复制/粘贴代码，除了我使用Atom而不是angular-cli，因为我已经构建了应用程序的开头。 Atom-typescript找到了所有内容并说没有错误。但是，尽管进行了大量试验，但是当修改后的应用无法加载时，我反复得到这些未找到的Console错误。
zone.js：1263获取http://localhost:3000/node_modules/@angular2-material/button/ 404（未找到）scheduleTask @ zone.js：1263
主页：27错误：（SystemJS）XHR错误（404 Not Found）loading http://localhost:3000/node_modules/@angular2-material/button（...）
zone.js：1263获取http://localhost:3000/node_modules/@angular2-material/list/ 404（未找到）
我查看了上面的node_modules文件，它们存在于我的代码中。
根据“入门指南”中的说明，相关代码为：
app.module.ts
import { MdButtonModule } from '@angular2-material/button';
import { MdListModule } from '@angular2-material/list';
@NgModule({
imports: [ BrowserModule,
FormsModule,
MdButtonModule,
MdListModule,
routing
],
systemjs.config.js
var map = {
'@angular2-material': 'node_modules/@angular2-material',
'@angular2-material/core': 'node_modules/@angular2-material/core/core',
'@angular2-material/list': 'node_modules/@angular2-material/list',
'@angular2-material/button': 'node_modules/@angular2-material/button'
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
ngPackageNames.forEach(setPackageConfig);
HTML页面有几个md-list，md-list-item和md-button标签。
我应该改变什么？
答案 0 :(得分：2)
我从今天早上（9/16）开始使用Angular2（最终版），Angular2-Material 2.0.0-alpha.8-2和TypeScript 2.0.0。正如您在下面的package.json中看到的那样，我按照this video中的说明安装（并运行）了大部分当前可用的Angular2 Material组件。
发布我的system.config.ts，以便您可以看到它，希望它可以帮助您排除故障。
extra_number = sum(all N+1 numbers) - N*(N+1)/2
我的package.json的相关部分：
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
// Angular2-Material
'@angular2-material/core': 'npm:@angular2-material/core/core.umd.js',
'@angular2-material/button': 'npm:@angular2-material/button/button.umd.js',
'@angular2-material/card': 'npm:@angular2-material/card/card.umd.js',
'@angular2-material/checkbox': 'npm:@angular2-material/checkbox/checkbox.umd.js',
'@angular2-material/grid-list': 'npm:@angular2-material/grid-list/grid-list.umd.js',
'@angular2-material/icon': 'npm:@angular2-material/icon/icon.umd.js',
'@angular2-material/input': 'npm:@angular2-material/input/input.umd.js',
'@angular2-material/list': 'npm:@angular2-material/list/list.umd.js',
'@angular2-material/radio': 'npm:@angular2-material/radio/radio.umd.js',
'@angular2-material/sidenav': 'npm:@angular2-material/sidenav/sidenav.umd.js',
'@angular2-material/toolbar': 'npm:@angular2-material/toolbar/toolbar.umd.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
将打样稿更新到版本2.0.0。
还必须为hammerjs注册打字（触摸手势支持），但我相信如果您使用 ...
"dependencies": {
"@angular/common": "~2.0.0",
"@angular/compiler": "~2.0.0",
"@angular/core": "~2.0.0",
"@angular/forms": "~2.0.0",
"@angular/http": "~2.0.0",
"@angular/platform-browser": "~2.0.0",
"@angular/platform-browser-dynamic": "~2.0.0",
"@angular/router": "~3.0.0",
"@angular/upgrade": "~2.0.0",
"@angular2-material/button": "^2.0.0-alpha.8-2",
"@angular2-material/card": "^2.0.0-alpha.8-2",
"@angular2-material/checkbox": "^2.0.0-alpha.8-2",
"@angular2-material/core": "^2.0.0-alpha.8-2",
"@angular2-material/grid-list": "^2.0.0-alpha.8-2",
"@angular2-material/icon": "^2.0.0-alpha.8-2",
"@angular2-material/input": "^2.0.0-alpha.8-2",
"@angular2-material/list": "^2.0.0-alpha.8-2",
"@angular2-material/radio": "^2.0.0-alpha.8-2",
"@angular2-material/sidenav": "^2.0.0-alpha.8-2",
"@angular2-material/toolbar": "^2.0.0-alpha.8-2",
"angular2-in-memory-web-api": "~0.0.19",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"reflect-metadata": "^0.1.3",
"rxjs": "~5.0.0-beta.12",
"systemjs": "~0.19.27",
"zone.js": "^0.6.21"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.0",
"typings": "^1.3.2"
}
...
，则只需要这样。
答案 1 :(得分：1)
对Angular Material 2版本2.0.0-alpha.9进行重大更改，您只需在systemjs.config.ts中映射这一行
'@angular/material': 'npm:@angular/material/material.umd.js',
package.json也变得更简单：
"@angular/material": "^2.0.0-alpha.9-3"
不要忘记导入NgModule
import { MaterialModule } from '@angular/material';
@NgModule({
...
imports: [MaterialModule.forRoot()],
...
})
Angular Material已从@ angular2-material / ...包更改为a @ angular / material下的单个包。随着这种变化，那里 是一个新的NgModule，MaterialModule，它包含了所有的 组件。 ...