Recursion bug in Angular (child in defer block)

[dreamstar-enterprises]

Which @angular/* package(s) are the source of the bug?

compiler-cli, compiler, core

Is this a regression?

Yes

Description

I cannot reproduce this behaviour on StackBlitz...

With this,

<!-- project navigation bar -->
<app-project-navigation></app-project-navigation>

@defer(when isDataLoaded()) {

  <!-- project container -->
  <div class="fadeIn">

    @if(!hasErrorSignal()){
      
      <!-- project-container page router -->
      <router-outlet></router-outlet>

    } @else {

      <p>Error in making Http request(s).</p>

    }

</div>

}

Loads child component once, as expected

.
.
But with this, making the one change, putting the child nav component, in the defer block,

@defer(when isDataLoaded()) {

  <!-- project container -->
  <div class="fadeIn">

    @if(!hasErrorSignal()){

      <!-- project navigation bar -->
      <app-project-navigation></app-project-navigation>

      <!-- project-container page router -->
      <router-outlet></router-outlet>

    } @else {

      <p>Error in making Http request(s).</p>

    }

</div>

}

I get this,

This looks like an Angular 17 "@angular/core": "^17.3.8", - bug?

Happy to try and post this elsewhere or do further work, to try and understand the root cause.

Thanks in advance

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

See above

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[atscott]

The screenshot of your app looks pretty simple. Are you able to share a github repository with the reproduction?

[dreamstar-enterprises]

Hi Andrew,

I'll see what I can do, I'd rather not share my entire app... (is there a way I can share a few components?)

[atscott]

is there a way I can share a few components?)

yes, you can keep removing more and more things from your application. You should be able to get the app down to just a few components that are able to reproduce the problem.

[dreamstar-enterprises]

ok, give me a few hours... I'll get back to you

[dreamstar-enterprises]

I cloned the package, and tested it, and it worked. So, then did a fresh install of everything

npm update
ng update

And it then my older uncloned original App worked. Must have been some stability issue with a recent Angular update

This now what works for me:

"dependencies": {
    "@angular/animations": "^17.3.2",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.2",
    "@angular/compiler": "^17.3.2",
    "@angular/core": "^17.3.2",
    "@angular/forms": "^17.3.2",
    "@angular/material": "^17.3.1",
    "@angular/material-experimental": "^17.3.9",
    "@angular/material-moment-adapter": "^17.3.9",
    "@angular/platform-browser": "^17.3.2",
    "@angular/platform-browser-dynamic": "^17.3.2",
    "@angular/router": "^17.3.2",
    "@material/web": "^1.1.1",
    "@ngrx/operators": "^17.2.0",
    "@ngrx/signals": "^17.2.0",
    "@types/lodash": "^4.17.1",
    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

Closing issue

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