null exception in ElementInjector when removing view elements via *ng-if and are queried using a ViewQuery

[vikerman]

We are using Angular 2 with Dart - Alpha 35.

I have a component with a view that looks like this. My component uses the "show" boolean to control whether the elements underneath are displayed or not.

tab-panel and tab are components implemented in our code base.

The tab-panel component constructor with Injector looks like
TabPanelComponent(
@query(TabDirective) QueryList tabQuery,
@ViewQuery(ItemDirective, descendants: true) QueryList itemQuery,
@ViewQuery(AnotherItemDirective) QueryList anotherItemQuery)

When "show" is set to false I get the following null exception. When I debug it I found that it's on the @ViewQuery from the TabPanelComponent for the ItemDirective (Exception stack trace pasted below)

I found it's because the injector is dehydrated by the time query.update() is called in _removeParentQuery. I tried to quickly add a check for hydrated and that fixed the exception issue but that seemed to cause other problems with query not getting cleared properly and left with stale tab panels.

element_injector.dart:

_removeParentQuery(QueryRef query) {
if (isPresent(query)) {
this._pruneQueryFromTree(query);
query.update(); ---------------------> this.hyrdrated is false at this point.
}
}

Here is the full exception stack:

EXCEPTION: The null object does not have a getter 'view'.

NoSuchMethodError: method not found: 'view'
Receiver: null
Arguments: [] in [show in DebugPanelComponent: <div class="outer" class="outer" *ng-if="show">]
ORIGINAL EXCEPTION: The null object does not have a getter 'view'.

NoSuchMethodError: method not found: 'view'
Receiver: null
Arguments: []
ORIGINAL STACKTRACE:
#0 Object._noSuchMethod (dart:core-patch/object_patch.dart:42)
#1 Object.noSuchMethod (dart:core-patch/object_patch.dart:45)
#2 ElementInjector.getRootViewInjectors (package:angular2/src/core/compiler/element_injector.dart:825:38)
#3 QueryRef.update (package:angular2/src/core/compiler/element_injector.dart:1163:47)
#4 ElementInjector._removeParentQuery (package:angular2/src/core/compiler/element_injector.dart:764:13)
#5 ElementInjector._removeParentQueries (package:angular2/src/core/compiler/element_injector.dart:758:10)
#6 ElementInjector.unlink (package:angular2/src/core/compiler/element_injector.dart:742:10)
#7 AppViewManagerUtils.detachViewInContainer (package:angular2/src/core/compiler/view_manager_utils.dart:159:13)
#8 AppViewManager._destroyViewInContainer (package:angular2/src/core/compiler/view_manager.dart:358:17)
#9 AppViewManager._viewDehydrateRecurse (package:angular2/src/core/compiler/view_manager.dart:391:18)
#10 AppViewManager._destroyViewInContainer (package:angular2/src/core/compiler/view_manager.dart:357:10)
#11 AppViewManager.destroyViewInContainer (package:angular2/src/core/compiler/view_manager.dart:281:10)
#12 ViewContainerRef.remove (package:angular2/src/core/compiler/view_container_ref.dart:107:22)
#13 ViewContainerRef.clear (package:angular2/src/core/compiler/view_container_ref.dart:36:12)
#14 NgIf.ngIf= (package:angular2/src/directives/ng_if.dart:43:27)
#15 _DebugPanelComponent_ChangeDetector0.detectChangesInRecordsInternal (package:xxx.xxx.xxx_xxx.panel/panel.ng_deps.dart:112:26)
#16 AbstractChangeDetector.detectChangesInRecords (package:angular2/src/change_detection/abstract_change_detector.dart:124:12)
#17 AbstractChangeDetector.runDetectChanges (package:angular2/src/change_detection/abstract_change_detector.dart:101:10)
#18 AbstractChangeDetector._detectChangesInShadowDomChildren (package:angular2/src/change_detection/abstract_change_detector.dart:184:12)
#19 AbstractChangeDetector.runDetectChanges (package:angular2/src/change_detection/abstract_change_detector.dart:104:10)
#20 AbstractChangeDetector._detectChangesInShadowDomChildren (package:angular2/src/change_detection/abstract_change_detector.dart:184:12)
#21 AbstractChangeDetector.runDetectChanges (package:angular2/src/change_detection/abstract_change_detector.dart:104:10)
#22 AbstractChangeDetector.detectChanges (package:angular2/src/change_detection/abstract_change_detector.dart:92:10)
#23 LifeCycle.tick (package:angular2/src/core/life_cycle/life_cycle.dart:78:28)
#24 LifeCycle.registerWith. (package:angular2/src/core/life_cycle/life_cycle.dart:54:40)
#25 _rootRun (dart:async/zone.dart:904)
#26 _ZoneDelegate.run (dart:async/zone.dart:503)
#27 NgZone._run (package:angular2/src/core/zone/ng_zone.dart:216:20)
#28 _CustomZone.run (dart:async/zone.dart:803)
#29 _CustomZone.runGuarded (dart:async/zone.dart:709)
#30 NgZone.run (package:angular2/src/core/zone/ng_zone.dart:168:23)
#31 DomEventsPlugin.sameElementCallback. (package:angular2/src/render/dom/events/event_manager.dart:108:14)

[rkirov]

Should have been fixed in 92da543. It is already in master but you need to wait for the next alpha release (should be in a day or so).

[vikerman]

Thanks. Will verify and close the issue.

[vikerman]

Fixed in latest drop.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}