未知的元素 - 角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组件的每个模块中。