加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 07:15:40 所属栏目:安全 来源:网络整理
导读:此时我的头撞在墙上.我使用SystemJS和角度材料运行角度2应用程序时出错,无法弄清楚原因.我正在使用角度种子项目: https://github.com/mgechev/angular-seed.我通过此指南添加了材料: https://github.com/mgechev/angular-seed/wiki/Integration-with-Angul
此时我的头撞在墙上.我使用SystemJS和角度材料运行角度2应用程序时出错,无法弄清楚原因.我正在使用角度种子项目: https://github.com/mgechev/angular-seed.我通过此指南添加了材料: https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2.

错误:

未处理的Promise拒绝:模板解析错误:
‘md-toolbar’不是已知元素:

home.component.html

< MD-工具栏>试验< / MD-工具栏>

SystemJS配置

????this.NPM_DEPENDENCIES = [
??????… this.NPM_DEPENDENCIES,
??????{src:’@ angular / material / core / theming / prebuilt / indigo-pink.css’,inject:true}
??????// {src:’jquery / dist / jquery.min.js’,注入:’libs’},
??????// {src:’lodash / lodash.min.js’,
????].
????this.addPackageBundles({
????????名: ‘@角/材料’,
????????路径:’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 {
...

问 – 如何修复此未知元素问题?谢谢!

解决方法

如最后一个版本所示 (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中加载模块,则意味着您创建了模块服务的全局实例,并且所有子组件都可以访问thaqt服务.这就是您不需要再次在home.module中加载material.module的原因,因为MaterialModule用于加载Material用于连接材质组件的服务.那就是MaterialModule所做的一切.

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读