未知的元素 - 角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' } });

注意，它似乎與開發工具

APP模塊

... 
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)），您必須在加載home.component的模塊中導入MdToolbarModule。

如果模塊是home.module，只需加載MdToolbarModule那裏，就像這樣：

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刪除不必要的代碼的唯一方法。如果不在每個需要此模塊的模塊中加載模塊，編譯器將永遠不會知道誰使用此模塊，並且需要將其附加到所有組件中，即使它不是懶惰組件。

您不需要在其他組件中加載MaterialModule的原因是app.module是您的入口點，無論您加載哪個惰性模塊，它都會加載。我們可以說app.module是每個模塊的父親，他們是否懶惰。

所以，如果你使用forRoot()在app.module加載模塊，這意味着你創建的模塊services和所有子組件的全局實例將有機會獲得thaqt服務。這就是您不需要再次在home.module中加載material.module的原因，因爲MaterialModule用於加載材料用於連接材料組件的服務。這就是所有的MaterialModule。

如果您已經在父組件中加載了MaterialModule，則每個材質組件都是即插即用的。

對於沒有加載forRoot()的模塊，您不會有單件服務，因此您需要將其加載到每個組件中。所有這些都是必要的，以便在你的構建中只有你需要的東西時，讓樹更好地搖動。

Answer 2

選項1：

1. 請確保您使用以下命令將您的應用

   npm install --save @angular/material 
   

2. 去安裝的材料node_modules並檢查這些文件是否存在

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

3. 如果上面兩個文件存在，

   • 刪除Materials文件夾
   • 再次
   • 安裝它安裝前檢查，如果它是有作爲的package.json文件的依賴性。
   • 現在檢查上述文件是否存在。

4. 在開發工具的網絡選項卡，請檢查您是否有如下

選項2：

如果上述方案沒有工作與嘗試此

1. 有關E中的文件下方在index.html的

2. 在你config.js文件除去的@angular/material線，並使用下面CDN參考

   '@角/材料'： 'https://unpkg.com/@angular/material/bundles/material.umd.js'，

LIVE DEMO表明該CDN緩建工程

Updat電子1：現在活塞工作正常，你可以看看它。

選項2的解釋是使用cdn引用，它不關心你是否安裝了node_module，在大多數情況下它肯定會起作用。如果這個CDN鏈接修復你的問題。更新我我們將嘗試修復您的案例中的選項1。

Answer 3

@karns，你提到的問題存在於HomeComponent中，我注意到在你的導入列表中，有一個HomeModule。

HomeComponent是否屬於該HomeModule？

如果是這樣，您是否將MaterialModule導入到HomeModule中？

您需要將MaterialModule（或導出MaterialModule的模塊）導入到可能在其模板中使用Angular Material組件的每個模塊中。