未知元素 - 角度2与角度2材料

Question

此时我的头撞在墙上.我使用SystemJS和角度材料运行角度2应用程序时出错,无法弄清楚原因.我正在使用angular-seed项目: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' } });

请注意,在使用dev工具检查源时,看起来文件正在浏览器中加载

应用模块

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

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

的package.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 {
...

问 - 如何修复此未知元素问题？谢谢!

Answer 1

正如最后一个版本所说（2.0.0-beta.3 cesium-cephalopod (2017-04-07)MdToolbarModule ），您必须在加载的模块中导入home.component.

如果模块是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是您的入口点，无论您加载哪个延迟模块，它总是会加载。我们可以说它app.module是每个模块的父亲，无论它们是否懒惰。

app.module因此，如果您在使用中加载模块，forRoot()则意味着您创建了该模块的全局实例services，并且所有子组件都将有权访问 thaqt 服务。这就是您不需要再次加载的原因material.module，home.module因为MaterialModule用于加载 Material 用于连接材质组件的服务。这就是 MaterialModule 所做的全部工作。

MaterialModule如果您已经加载了父组件，则每个材质组件都是即插即用的。

对于没有加载的模块forRoot()，您将没有单例服务，因此您需要在每个组件中加载它。所有这些都是必要的，以便更好地进行 Tree Shaking，让您只拥有构建中所需的内容。