未知元素 - 角度2与角度2材料-Java 学习之路

此时我的头撞在墙上 . 我'm getting an error when running an angular 2 app using SystemJS and angular material, can'吨弄清楚原因 . 我正在使用angular-seed项目：https://github.com/mgechev/angular-seed . 我通过此指南添加了材料：https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2 .

Error:

Unhandled Promise rejection: Template parse errors: 'md-toolbar' is not a known element:

home.component.html

<md-toolbar>Test</md-toolbar>

SystemJS Config

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工具检查源时，看起来文件正在浏览器中加载

App Module

...
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"
  }
  ...

Home Component

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 - 如何修复此未知元素问题？谢谢！

3 回答

1

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

HomeComponent是否属于HomeModule？

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

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

回复于 2024-05-05T02:45:40+08:00
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和Lazy Load，这是必需的 . 这是Angular可以删除不必要代码的唯一方法 . 如果你不在每个需要它的模块中加载模块，编译器将永远不知道谁使用它，并且需要将它附加到所有组件中，即使它不是一个惰性组件 .

你不需要在 app.module 中的其他组件中加载 MaterialModule 的原因是 app.module 是你的入口点，无论你加载哪个懒惰模块，它总是被加载 . 我们可以说 app.module 是每个模块的父亲，不管他们是懒惰还是懒惰 .

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

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

对于没有 forRoot() 加载的模块，您将没有单件服务，因此您需要在每个组件中加载它 . 所有这一切都是必要的，以便在你的构建中只有你需要的东西时可以让树更好地摇晃 .
回复于 2024-05-05T02:45:40+08:00
0
选项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文件中的依赖项存在 .
- 现在检查上面的文件是否存在 .
- 在开发人员工具的网络选项卡中，检查您是否具有以下内容
选项2：

如果上述解决方案无效，请尝试使用此功能
- 在index.html
  
  中包含以下文件
- 在你的config.js文件 remove 中 @angular/material 行并使用下面的cdn参考
'@angular/material'：'https://unpkg.com/@angular/material/bundles/material.umd.js'，

LIVE DEMO 显示cdn引用有效

更新1：现在，plunker工作正常，你可以看看它 .

选项2的解释是使用cdn引用，如果您安装了node_module，则无关心，在大多数情况下它肯定会起作用 . 如果这个cdn链接修复了你的问题 . 更新我们将尝试在您的情况下修复选项1 .
回复于 2024-05-05T02:45:40+08:00

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

3 回答

相关问题