角2材料。在一个组件中工作的相同MdIcon在另一个中失败

我刚刚从ng2 rc4与material2 alpha6升级到ng2 rc5与material 2 alpha7-2。在我使用<md-icon>之前的代码中弹出一个新错误。角2材料。在一个组件中工作的相同MdIcon在另一个中失败

我无法看到完整的错误文本，因为不是我得到Observable_1.Observable.throw is not a function错误（应用程序崩溃），并在堆栈跟踪之中顶线：

MdIconRegistry.prototype.getNamedSvgIcon 
    @angular2-material/icon/icon-registry.js:180:16 
MdIcon.prototype.ngOnChanges 
    @angular2-material/icon/icon.js:107:17

如果我console.log()图标的ID寻求正上方icon-registry.js @ line 180，我看到ic_lightbulb_outline_24px。此图标出现在我的svg精灵中，但在我今天升级到material 2 alpha 7-2之前它已正确显示。下面是它在SVG精灵部分：

...<svg viewBox="..." id="ic_lightbulb_outline_24px"><path d="..."/></svg>...

模板：

<md-icon svgIcon="ic_lightbulb_outline_24px"></md-icon>

在我的主要AppComponent我有

this._iconRegistry.addSvgIconSet('src/icons/sprite.defs.svg');

我还进口MdIconModule到主AppModule。什么是真正令人费解的是，

从同一个精灵文件相同的图标适用于其他组件和
此升级之前的工作！

两个多条信息的：

此问题只影响懒加载模块
，如果是在一个部件中的应用程序加载的模板使用<md-icon>相同的模板组件将正常工作如果在延迟加载的组件的模板上使用该错误，将会失败并返回此错误

I've built a Plunkr演示此问题。您会注意到，急切加载的组件（AppComponent和HomeComponent）能够显示该图标。但是，LazyLoadedComponent不能。

以下是完整的堆栈跟踪：

MdIconRegistry.prototype.getNamedSvgIcon /@angular2-material/icon/icon-registry.js:180:16 
MdIcon.prototype.ngOnChanges /@angular2-material/icon/icon.js:107:17 
anonymous/[email protected]ProfileComponent.ngfactory.js:1318:29 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17 
anonymous/[email protected]ProfileComponent.ngfactory.js:294:3 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17 
anonymous/[email protected]ProfileComponent.ngfactory.js:37:3 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17 
anonymous/_[email protected]UserProfileComponent.ngfactory.js:28:3 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17 
AppView</AppView.prototype.detectChangesInternal /@angular/core//bundles/core.umd.js:12596:13 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17 
AppView</AppView.prototype.detectChangesInternal /@angular/core//bundles/core.umd.js:12597:13 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17 
anonymous/[email protected].ngfactory.js:445:3 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17 
anonymous/[email protected]onent.ngfactory.js:30:3 
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13 
ViewRef_</ViewRef_.prototype.detectChanges /@angular/core//bundles/core.umd.js:10804:58 
ApplicationRef_</ApplicationRef_.prototype.tick/< /@angular/core//bundles/core.umd.js:10191:79 
ApplicationRef_</ApplicationRef_.prototype.tick /@angular/core//bundles/core.umd.js:10191:17 
ApplicationRef_/<.next/< /@angular/core//bundles/core.umd.js:10095:103 
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke /zone.js/dist/zone.js:323:20 
NgZoneImpl/this.inner<.onInvoke /@angular/core//bundles/core.umd.js:9245:36 
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke /zone.js/dist/zone.js:322:20 
Zone</Zone</Zone.prototype.run /zone.js/dist/zone.js:216:25 
NgZoneImpl</NgZoneImpl.prototype.runInner /@angular/core//bundles/core.umd.js:9276:64 
NgZone</NgZone.prototype.run /@angular/core//bundles/core.umd.js:9505:55 
ApplicationRef_/<.next /@angular/core//bundles/core.umd.js:10095:73 
EventEmitter</EventEmitter.prototype.subscribe/schedulerFn< /@angular/core//bundles/core.umd.js:9168:58 
SafeSubscriber.prototype.__tryOrUnsub /rxjs/Subscriber.js:225:13 
SafeSubscriber.prototype.next /rxjs/Subscriber.js:174:17 
Subscriber.prototype._next /rxjs/Subscriber.js:124:9 
Subscriber.prototype.next /rxjs/Subscriber.js:88:13 
Subject.prototype._finalNext /rxjs/Subject.js:128:13 
Subject.prototype._next /rxjs/Subject.js:120:13 
Subject.prototype.next /rxjs/Subject.js:77:9 
EventEmitter</EventEmitter.prototype.emit /@angular/core//bundles/core.umd.js:9156:58 
NgZone</NgZone.prototype._checkStable /@angular/core//bundles/core.umd.js:9415:25 
NgZone/this._zoneImpl<.onLeave /@angular/core//bundles/core.umd.js:9387:21 
NgZoneImpl/this.inner<.onInvokeTask /@angular/core//bundles/core.umd.js:9239:29 
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask /zone.js/dist/zone.js:355:24 
Zone</Zone</Zone.prototype.runTask /zone.js/dist/zone.js:256:29 
ZoneTask/this.invoke /zone.js/dist/zone.js:423:29

任何想法？

（交叉贴on github）

来源

2016-08-12 BeetleJuice

（这是my post here再现，因为这两个问题实际上是同一个）

我想通了，因为MdIconModule本身MdIconRegistry服务在其providers阵列，每另一个模块导入它时，会提供一个新的服务实例。因此，在引导时加载并且属于同一个AppModule的所有组件共享此服务的相同实例。然而，稍后加载的组件（通过延迟加载）具有不同服务实例，因此无法看到在引导时注册的图标。

对于help from James，我已经使用了根本不使用MdIconModule的特制模块的解决方法，而是仅声明MdIcon类。然后，我单独提供MdIconRegistry服务，并且仅向AppComponent提供服务。其结果是，应用程序范围内只有一个服务实例，并且在引导时注册的图标无处不在。

修改MdIconFixedModule

@NgModule({ 
    imports: [CommonModule, HttpModule], 
    declarations: [MdIcon], 
    exports: [MdIcon], 
    providers: [],//leave empty to avoid multiple instances of MdIconRegistry 
}) 
export class MdIconFixedModule { 
    static forRoot() { 
     return { 
      ngModule: MdIconFixedModule, 
      //will be available only to whoever calls .forRoot() 
      providers: [MdIconRegistry] 
     }; 
    } 
}

模块需要直接使用的图标可以导入MdIconFixedModule，因为这不包含MdIconRegistry。 AppModule还需要注册包含服务的图标导入MdIconFixedModule.forRoot()。

此实现can be seen here.

NG-材料模块的这种限制的细节开槽是fixed with the alpha 8 release。

来源

2016-08-20 12:45:41 BeetleJuice

角2材料。在一个组件中工作的相同MdIcon在另一个中失败

回答

相关问题