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()],
  ...

的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

@karns，你提到HomeComponent中存在问题，我注意到你的导入列表中有一个HomeModule。

HomeComponent是否属于该HomeModule？

如果是，您是否将MaterialModule导入HomeModule？

您需要将MaterialModule（或导出MaterialModule的模块）导入到可能在其模板中使用Angular Material组件的每个模块中。

Answer 2

正如上一个版本所说的(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和Lazy Load，这是必需的。这是Angular可以删除不必要代码的唯一方法。如果你不在每个需要它的模块中加载模块，编译器将永远不知道是谁使用它，并且需要将它附加到所有组件中，即使它不是一个惰性组件。

您不需要在其他组件中加载MaterialModule但在app.module中的原因是app.module是您的入口点，无论您使用哪个懒惰模块，它始终都会加载加载。我们可以说app.module是每个模块的父亲，他们是懒惰还是没有。

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

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

对于没有forRoot()加载的模块，您将没有单件服务，因此您需要在每个组件中加载它。所有这一切都是必要的，以便在你的构建中只有你需要的东西时可以让树更好地摇晃。

Answer 3

选项1：

确保您使用以下命令将材料安装到您的应用
```
npm install --save @angular/material
```

转到node_modules并检查这些文件是否存在

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

如果上面有两个文件，
- 删除材料文件夹
- 重新安装
- 在安装之前检查它是否作为package.json文件中的依赖项。
- 立即检查上述文件是否存在。
在开发人员工具的网络标签中，检查您是否拥有以下内容

enter image description here

选项2：

如果上述解决方案无效，请尝试使用此

在index.html中包含以下文件
在您的config.js文件删除 @angular/material行并使用以下cdn参考

＆＃39; @ angular / material＆＃39;：＆＃39; https://unpkg.com/@angular/material/bundles/material.umd.js＆＃39;，

LIVE DEMO 表明cdn参考有效

更新1：现在工作正常，你可以看一下它。

选项2的解释是使用cdn引用，如果你安装了node_module，它就不关心了，在大多数情况下肯定会有效。如果这个cdn链接修复了你的问题。更新我们将尝试在您的案例中修复选项1。

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

3 个答案: