[NxMultiStepper] Steps break on cascading ngIf inside step triggers

glp commented 2 years ago

⚡ Reproduction

Steps to reproduce:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hasThings1 = false;
  hasThings2 = true;

  updateView($event: Event) {
    this.hasThings1 = true;
  }
}

 <nx-multi-stepper>
  <nx-step>
    <select (change)="updateView($event)">
      <option selected disabled>Chooose</option>
      <option [value]="true">Break Step</option>
    </select>
    <div *ngIf="hasThings1">
      <p *ngIf="hasThings2">This is any content of "Step 1"</p>
    </div>
  </nx-step>
 </nx-multi-stepper>

Run with Ivy in production configuration.
Select the Option,
Step gets unloaded.

📗 Expected Behavior

Step should show the content of the paragraph

📕 Actual Behavior

Step vanishes

📦 Environment

"dependencies": { "@angular/animations": "~11.2.14", "@angular/cdk": "^11.2.12", "@angular/common": "~11.2.14", "@angular/compiler": "~11.2.14", "@angular/core": "~11.2.14", "@angular/forms": "~11.2.14", "@angular/platform-browser": "~11.2.14", "@angular/platform-browser-dynamic": "~11.2.14", "@angular/router": "~11.2.14", "@aposin/ng-aquila": "^11.7.3", "css-vars-ponyfill": "^2.1.2", "i18n-iso-countries": "^6.7.0", "iban": "^0.0.12", "moment": "^2.22.2", "object-fit-images": "^3.2.3", "rxjs": "~6.6.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1102.14", "@angular/cli": "~11.2.14", "@angular/compiler-cli": "~11.2.14", "@types/jasmine": "~3.8.0", "@types/node": "^12.11.1", "jasmine-core": "~3.8.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.0.8" }

Aquila/NDBX version: 11.7.3
Angular/CDK version: 11.2.12
Browser name & version: Chrome, 93.0.4577.25
Operating System & version (desktop or mobile): Windows 10, macOS 11.4

glp commented 2 years ago

Anyone?

Phil147 commented 2 years ago

Hi @glp

sorry for the silence, it is holiday season right now and people were away. That one looks tricky. When you disable ivy everything works. I kind of suspect something related to https://github.com/angular/angular/issues/35602 with ivy creating weird code or dropping code.

But setting sideEffects: true in the package.json of ng-aquila and with Angular 11 and Angular 10 also didn't help.

If you remove the inner *ngIf="hasThings2" then it also works. So currently I highly suspect some problem of Ivy with templates and the generated code. Because at this point I couldn't easily wrap my head around what could be done here by the library. The component simply takes the step content as a template and projects it into an ng-container via ngTemplateOutlet. Usually it's obvious quickly what is going on but right now it's not to me, so that will need more extensive debugging.

glp commented 2 years ago

Hi @Phil147,

Thank you, I came to the same conclusion. I don't have time to debug this further, so for the moment I had to disable Ivy.

Phil147 commented 2 years ago

Hi @glp

so I wanted to debug a bit more and what I did first was update to angular 12 and there everything seems to work even when angular/cdk and ng-aquila stay at version 11. Could you try that as well and confirm if it's working for you outside of the example repo you provided?

yd-allianz commented 2 years ago

Hi @glp closing this issue now, let us know if you still need it.

allianz / ng-aquila