1

すべてのrcリリースの後の9/14/16リリースであるAngular 2.0.0をロードするアプリがあります。Google チームからの公式 MD リリースである Angular Material2 を追加しようとしています。アプリの最初の部分を既に構築しているため、angular-cli ではなく Atom を使用していることを除いて、Getting Started サイトからコードをコピーして貼り付けています。Atom-typescript はすべてを検出し、エラーがないことを示します。しかし、多くの試行でスラッシングしているにもかかわらず、変更されたアプリの読み込みに失敗すると、これらの見つからないコンソール エラーが繰り返し発生します。

zone.js:1263 GET http://localhost:3000/node_modules/@angular2-material/button/ 404 (見つかりません)scheduleTask @ zone.js:1263

home:27 エラー: (SystemJS) XHR エラー (404 Not Found) http://localhost:3000/node_modules/@angular2-material/button の読み込み中(…)

zone.js:1263 GET 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 タグがあります。

何を変更すればよいですか？

4

2 に答える 2

2

今朝 (9/16) の時点で、Angular2 (最終)、Angular2-Material 2.0.0-alpha.8-2、および TypeScript 2.0.0 で動作させることができました。以下の package.json でわかるように、現在利用可能な Angular2 Material コンポーネントの大部分は、このビデオの手順に従ってインストール (および実行) されています。

system.config.ts を投稿して、トラブルシューティングに役立つことを期待して表示できるようにします。

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

私のpackage.jsonの関連部分：

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

typescript をバージョン 2.0.0 に更新しました。

また、hammerjs (タッチ ジェスチャのサポート) のタイピングを登録する必要がありましたが、MdIconModule.

于 2016-09-16T13:55:09.133 に答える
1

Angular Material 2 リリース 2.0.0-alpha.9 の重大な変更により、systemjs.config.ts でこの 1 行を単純にマップできます。

'@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()],
  ...
})

material2 リリースから:

Angular Material は @angular2-material/... パッケージから @angular/material の下の単一のパッケージに変更されました。この変更に伴い、すべてのコンポーネントを含む新しい NgModule である MaterialModule があります。...

于 2016-11-01T06:15:50.753 に答える