angular material2不適用於Angular 2.0.0應用程序

Question

我有一個應用程序可以在所有rc版本之後加載Angular 2.0.0，即9/14/16發行版。我正在嘗試添加來自Google團隊的官方MD發佈版Angular Material2。我是他們的入門網站的複製/粘貼代碼，除了我使用的是Atom而不是angular-cli，因爲我已經構建了應用程序的開始。 Atom-typescript找到了一切，並表示沒有錯誤。但儘管經過大量試用後，我反覆在修改後的應用程序加載失敗時得到這些未找到的控制檯錯誤。

zone.js：1263 GET http://localhost:3000/node_modules/@angular2-material/button/ 404（未找到）scheduleTask @ zone.js：1263

家：27錯誤：（SystemJS）XHR錯誤（404未找到）裝載http://localhost:3000/node_modules/@angular2-material/button（...）

zone.js：1263 GET http://localhost:3000/node_modules/@angular2-material/list/ 404（Not Found）

我看過上面的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-列表，md-list-item和md-button標籤。

我應該改變什麼？

Answer 1

今天早上（9/16），Angular2（final），Angular2-Material 2.0.0-alpha.8-2和TypeScript 2.0.0能夠使它工作。正如您在下面的package.json中看到的那樣，按照this video中的說明安裝（並運行）了大部分當前可用的Angular2 Material組件。

發佈我的system.config.ts，以便您可以看到它，希望它能幫助您排除故障。我的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); 

相關部分：

 ... 
     "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" 
     } 
     ... 

更新打字稿到2.0.0版本。

也必須註冊hammerjs（觸摸手勢支持）的類型，但我相信只有在您使用MdIconModule時才需要此類型。

Answer 2

隨着對角材料2版本2.0.0-alpha.9重大更改，您可以簡單地映射在systemjs.config.ts

'@angular/material': 'npm:@angular/material/material.umd.js', 

的包裝這一行。JSON也變得更簡單：

"@angular/material": "^2.0.0-alpha.9-3" 

而且不要忘記導入NgModule

import { MaterialModule } from '@angular/material'; 
@NgModule({ 
    ... 
    imports: [MaterialModule.forRoot()], 
    ... 
}) 

從material2 release：

Angular Material has changed from @angular2-material/... packages to a single package under @angular/material. Along with this change, there is a new NgModule, MaterialModule, that contains all of the components. ...