未知の要素 - 角度2の角度2の材質

Question

この時点で壁に頭を打つ。 SystemJSと角度のある素材を使用して角度2アプリを実行しているときにエラーが発生しましたが、理由を把握できません。私は角種子プロジェクト：https://github.com/mgechev/angular-seedを使用しています。このガイドラインで資料を追加しました：https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2。

エラー：

Unhandled Promise rejection: Template parse errors: 'md-toolbar' is not a known element:

home.component.html

<md-toolbar>Test</md-toolbar>

SystemJSコンフィグ

this.NPM_DEPENDENCIES = [ ...this.NPM_DEPENDENCIES, {src: '@angular/material/core/theming/prebuilt/indigo-pink.css', inject: true} // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, // {src: 'lodash/lodash.min.js', inject: 'libs'}, ]; this.addPackageBundles({ name:'@angular/material', path:'node_modules/@angular/material/bundles/material.umd.js', packageMeta:{ main: 'index.js', defaultExtension: 'js' } });

開発ツール

アプリケーションモジュール

... 
import { MaterialModule } from '@angular/material'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule, MaterialModule.forRoot(), AppRoutingModule, AboutModule, HomeModule, SharedModule.forRoot()], 
    ... 

パッケージとソースを検査する際のファイルがブラウザにロードされて表示されていることに注意してください。 json

"dependencies": { 
    "@angular/common": "~2.4.0", 
    "@angular/compiler": "~2.4.0", 
    "@angular/core": "~2.4.0", 
    "@angular/forms": "~2.4.0", 
    "@angular/http": "~2.4.0", 
    "@angular/material": "^2.0.0-beta.2", 
    "@angular/platform-browser": "~2.4.0", 
    "@angular/platform-browser-dynamic": "~2.4.0", 
    "@angular/router": "~3.4.1", 
    "core-js": "^2.4.1", 
    "intl": "^1.2.5", 
    "rxjs": "~5.0.3", 
    "systemjs": "0.19.41", 
    "zone.js": "^0.7.4" 
    } 
    ... 

ホームコンポーネント

import { Component, OnInit } from '@angular/core'; 
import { NameListService } from '../shared/name-list/name-list.service'; 

/** 
* This class represents the lazy loaded HomeComponent. 
*/ 
@Component({ 
    moduleId: module.id, 
    selector: 'sd-home', 
    templateUrl: 'home.component.html', 
    styleUrls: ['home.component.css'], 
}) 
export class HomeComponent implements OnInit { 
... 

Q - どのように私はこの未知の要素の問題を修正することができますか？ありがとう！

Answer 1

最後のバージョンでは(2.0.0-beta.3 cesium-cephalopod (2017-04-07)と表示されているため、MdToolbarModuleをモジュールhome.componentに読み込む必要があります。

モジュールは、ちょうどこのように、そこにMdToolbarModuleをロードし、home.moduleの場合：

import { MdToolbarModule } from '@angular/material'; 

@NgModule({ 
    imports: [ 
     ... 
     MdToolbarModule, // HERE YOU IMPORT THE TOOLBAR MODULE. IF YOU WANT ONLY THIS MODULE IN YOUR BUILD 
     ... 
], 
... 

これが原因でAOTと怠惰な負荷を必要とされています。これは、Angularが不要なコードを削除する唯一の方法です。これを必要とするすべてのモジュールにモジュールをロードしないと、コンパイラは誰がこれを使用するかを決して知らず、遅延コンポーネントでなくてもすべてのコンポーネントにモジュールを追加する必要があります。

app.module以外のコンポーネントにMaterialModuleをロードする必要がない理由は、app.moduleがエントリポイントであり、読み込んでいる遅延モジュールに関係なく常にロードされるためです。 app.moduleはすべてのモジュールの父であり、怠け者であるかどうかはわかりません。あなたがforRoot()を使用してapp.moduleでモジュールをロードする場合

だから、それはあなたがモジュールservicesのグローバルインスタンスを作成し、すべての子コンポーネントがthaqtサービスへのアクセスを持っていることを意味します。これは、material.moduleをhome.moduleに再度ロードする必要がない理由です。MaterialModuleは、マテリアルがマテリアルコンポーネントを接続するために使用するサービスをロードするために使用されるためです。これがMaterialModuleのすべてです。

すでに父親のコンポーネントにMaterialModuleをロードしている場合、各マテリアルコンポーネントはプラグアンドプレイです。

forRoot()なしでロードされたモジュールの場合、シングルトンサービスはありませんので、すべてのコンポーネントにロードする必要があります。これはビルドに必要なものだけを持っているところで、より良いツリーの揺れを許すために必要です。

Answer 2

オプション1：

1. あなたはnode_modulesに行く

   npm install --save @angular/material 
   

2. あなたのアプリに材料をインストールするには、以下のコマンドを使用していることを確認し、これらのファイルは

   存在しているかどうかを確認

   node_modules/@angular/material/bundles/material.umd.js 
   @angular/material/core/theming/prebuilt/indigo-pink.css 
   

3. 上記の2つのファイルがある場合は、

   • それはpackage.jsonファイルに依存関係として存在する場合、材料フォルダ
   • は、インストレーションチェックの前に再び
   • を、それをインストールして削除します。
   • 今、上記のファイルが存在するかどうかを確認してください。開発者用ツールのネットワークタブで
、あなたが

オプション2以下のように持っていることを確認してください。上記の溶液は、としてみてください動作しなかった場合は

この

1. 電子あなたのconfig.jsので

2. は、ファイルのindex.htmlで下記のファイルは、@angular/material行を削除し、以下のCDN参照

   '@角度/材質' を使用： 'https://unpkg.com/@angular/material/bundles/material.umd.js' を

LIVE DEMO CDNの参照が

UPDATを動作することを示すためにe 1：プランカは今はうまく動いています。あなたはそれを見ることができます。

説明2はnode_moduleがインストールされているかどうか気にしないcdn参照を使用することですが、ほとんどの場合は間違いなく動作します。このcdnリンクで問題が解決された場合。あなたのケースではオプション1を修正しようとします。

Answer 3

@karns、あなたはHomeComponentに問題があると言いましたが、私はあなたのインポートリストにHomeModuleがあることに気付きました。

HomeComponentはそのHomeModuleに属していますか？

もしそうなら、MaterialModuleをHomeModuleにインポートしましたか？

MaterialModule（またはMaterialModuleをエクスポートするモジュール）を、そのテンプレートのAngular Materialコンポーネントを使用する可能性があるすべてのモジュールにインポートする必要があります。