angular - 未知元素 - Angular 2 与 Angular 2 Material

Question

此时我用头撞墙。使用 SystemJS 和 Angular Material 运行 Angular 2 应用程序时出现错误，无法弄清楚原因。我正在使用 Angular 种子项目:https://github.com/mgechev/angular-seed .我通过以下指南添加了 Material :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()],
  ...

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) ) 您必须在加载 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 是你的入口点，无论您加载哪个惰性模块，它总是被加载。我们可以说 app.module 是每个模块的父亲，无论它们是否懒惰。

因此，如果您使用 forRoot() 在 app.module 中加载一个模块，这意味着您创建了该模块的全局实例 services 并且所有子组件都可以访问 thaqt 服务。这就是为什么你不需要再次加载home.module中的material.module，因为MaterialModule是用来加载连接 Material 组件的 Material 。这就是 MaterialModule 所做的一切。

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

对于没有forRoot() 加载的模块，您将没有单例服务，因此您需要在每个组件中加载它。所有这些都是必要的，以便在构建中只拥有所需内容的情况下实现更好的 tree shaking。