Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ivy] ngTemplateOulet errors when switching from template -> null -> template #32060

Closed
james-schwartzkopf opened this issue Aug 8, 2019 · 0 comments

Comments

@james-schwartzkopf
Copy link

commented Aug 8, 2019

馃悶 bug report

Affected Package

@angular/common

Is this a regression?

Yes, this works with Ivy disabled.

Description

Switching the template displayed by ngTemplateOutlet from a template to null and then back to a template causes an error (due to trying to remove the _viewRef twice).

This appears to be because _viewRef isn't cleared when it is removed in ngOnChanges:

ngOnChanges(changes: SimpleChanges) {
const recreateView = this._shouldRecreateView(changes);
if (recreateView) {
if (this._viewRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
}
if (this.ngTemplateOutlet) {
this._viewRef = this._viewContainerRef.createEmbeddedView(
this.ngTemplateOutlet, this.ngTemplateOutletContext);
}
} else {
if (this._viewRef && this.ngTemplateOutletContext) {
this._updateExistingContext(this.ngTemplateOutletContext);
}
}
}

馃敩 Minimal Reproduction

The error is only thrown when Ivy is enabled, so I created a repo to show the issue:
https://github.com/james-schwartzkopf/ng8-issues/blob/ng-templat-outlet-issue/src/app/app.component.html

<select [(ngModel)]="choice">
  <option>templateA</option>
  <option>templateB</option>
  <option>null</option>
</select>
{{choice}}
<hr>
<ng-container *ngTemplateOutlet="{templateA: templateA, templateB: templateB, 'null': null}[choice]"></ng-container>
<ng-template #templateA>
  Showing Template A
</ng-template>
<ng-template #templateB>
  Showing Template B
</ng-template>

馃敟 Exception or Error




ERROR Error: ASSERTION ERROR: index must be positive
    at throwError (core.js:999)
    at assertGreaterThan (core.js:988)
    at ViewContainerRef_._adjustIndex (core.js:12888)
    at ViewContainerRef_.remove (core.js:12859)
    at NgTemplateOutlet.ngOnChanges (common.js:5608)
    at NgTemplateOutlet.wrapOnChangesHook_inPreviousChangesStorage (core.js:21453)
    at callHook (core.js:2359)
    at callHooks (core.js:2319)
    at executeHooks (core.js:2270)
    at executePreOrderHooks (core.js:2242)

馃實 Your Environment

Angular Version:




$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / 鈻 \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.2.1
Node: 10.15.1
OS: win32 x64
Angular: 8.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.1
@angular-devkit/build-angular     0.802.1
@angular-devkit/build-optimizer   0.802.1
@angular-devkit/build-webpack     0.802.1
@angular-devkit/core              8.2.1
@angular-devkit/schematics        8.2.1
@angular/cli                      8.2.1
@ngtools/webpack                  8.2.1
@schematics/angular               8.2.1
@schematics/update                0.802.1
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0


Anything else relevant?

@alxhub alxhub added the comp: ivy label Aug 8, 2019

@ngbot ngbot bot added this to the needsTriage milestone Aug 8, 2019

@crisbeto crisbeto self-assigned this Aug 16, 2019

crisbeto added a commit to crisbeto/angular that referenced this issue Aug 16, 2019
fix(ivy): ngTemplateOutlet error when switching between null and temp鈥
鈥ate value

Fixes an error that is thrown by `ngTemplateOutlet` under Ivy when switching from a template to null and back to a template. The error is thrown because the reference to the previous ViewRef is never cleared and the directive tries to detach a view that has already been detached.

Fixes angular#32060.
ngdevelop-tech added a commit to ngdevelop-tech/angular that referenced this issue Aug 27, 2019
fix(ivy): ngTemplateOutlet error when switching between null and temp鈥
鈥ate value (angular#32160)

Fixes an error that is thrown by `ngTemplateOutlet` under Ivy when switching from a template to null and back to a template. The error is thrown because the reference to the previous ViewRef is never cleared and the directive tries to detach a view that has already been detached.

Fixes angular#32060.

PR Close angular#32160
sabeersulaiman added a commit to sabeersulaiman/angular that referenced this issue Sep 6, 2019
fix(ivy): ngTemplateOutlet error when switching between null and temp鈥
鈥ate value (angular#32160)

Fixes an error that is thrown by `ngTemplateOutlet` under Ivy when switching from a template to null and back to a template. The error is thrown because the reference to the previous ViewRef is never cleared and the directive tries to detach a view that has already been detached.

Fixes angular#32060.

PR Close angular#32160
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.