Height based animation within ng-content using *ngIf causes error

[pmb5]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
When using a height based animation within ng-content where the ng-Content uses *ngIf we get an error:

NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

If I move the *ngIf to the template the error goes away

Expected behavior
I should be able to use *ngIf on ng-content and within my template use height based animations without error

Minimal reproduction of the problem with instructions

Plunk with the error:
https://embed.plnkr.co/HbjFK2hHel2KiOigzw1t/

Plunk with a hack to get it working. I moved the *ngIf directive from ng-content in accordion-panel.component to the template in app.ts
https://embed.plnkr.co/dRGyNT1f2uB8qPW6UahE/

Please tell us about your environment:

• Angular version: > 2.1.0

• Browser: [all]

• Language: [all]

• Node (for AoT issues): node --version =

[matsko]

Looking into it.

[matsko]

So with this patch 842f52e (which will be there for 2.4.1 later today/tomorrow) it should not throw an error anymore. ng-content is a bit tricky to handle since it's designed to run change detection even when the element is not apart of the DOM (which is what makes animations fail). If you do find anything else not working then please reopen the issue.

[jinder]

@matsko I'm seeing the same error in 2.4.3 with an animation applied on an ngIf:

<div class="map-overlay" @fadeInOut *ngIf="isSearching$ | async"></div>

Only occurs in Chrome and is inconsistent, so quite difficult to track down.

[jinder]

@matsko Have provided a minimal repro on #14007.

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