routerLink in child not working - due to defer Block - getting recursion error about angular HOT 17 CLOSED

Please provide a runnable reproduction. There’s not enough information here to determine the issue but on the surface, the behavior seems likely correct as you’re using snapshot, which is exactly that: a snapshot of the state. The value will only update if you read a new snapshot and that depends on whether the bindings execute again.

from angular.

Maybe this might help:

https://stackblitz.com/edit/stackblitz-starters-ki6sdw?file=src%2Fmain.ts

Parent

  protected ngOnInit(): void {

    // assign project ID
    this.activatedRoute.params.
    pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((params) => {
      this.projectID = params['id'];
      console.log(this.projectID)
    });

    // if project in store doesn't match, get it
    if (this.projectStore.project()._id != this.projectID) {
      // do something
    }
  }

Child

  ngOnInit(){
    console.log(this.router.url)
    this.activatedRoute.params.
    pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((params) => {
        console.log(params['id'])
      });
  }

What my console shows:

last link in child, via params is wrong, hence all the child routerLinks in the template, are relative to the wrong url path.
The address bar shows the correct url

from angular.

The reproduction doesn’t have provideRouter with any routes. Is that intended?

from angular.

Sorry,
This ought to work, but I'm getting a compilation error that it cannot find App_Routes:

https://stackblitz.com/edit/stackblitz-starters-ki6sdw?file=src%2Fmain.ts

from angular.

Your main.ts should be outside the src directory.

from angular.

Removed that app router bug, I put the variable inside main.ts... not sure if it works for you

https://stackblitz.com/edit/stackblitz-starters-ki6sdw?file=src%2Fmain.ts

(for me the window says ...loading)

In JetBrains, I still get this:

Parent

  protected ngOnInit(): void {

    // assign project ID
    this.activatedRoute.params.
    pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((params) => {
      this.projectID = params['id'];
      console.log(this.projectID)
    });

    // if project in store doesn't match, get it
    if (this.projectStore.project()._id != this.projectID) {
      // do something
    }
  }

Child

  ngOnInit(){
    console.log(this.router.url)
    this.activatedRoute.params.
    pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((params) => {
        console.log(params['id'])
      });
  }

from angular.

Check the console for the errors. The selector on the bootstrapped component doesn't exist in the index.html.

from angular.

Strange, my consol is clean, but the window to the right says '...Loading'

from angular.

Check the browser's console, it's not a build error but a runtime error.

from angular.

Looks fine on StackBlitz... maybe I need to upgrade Angular or JetBrains:

from angular.

Only difference that I can tell is that I lazy load the project routes in app_routes, in Jet Brains:

export const APP_ROUTES: Routes = [
  {
    path: 'projects',
    title: 'App | Projects',
    loadChildren: () => import('../1. project-module/projects/projects.routes').then((m) => m.PROJECTS_ROUTES),
  },
  {
    path: 'projects/:id',
    title: 'App | Project Details',
    loadChildren: () => import('../1. project-module/project-container/project-container.routes').then((m) => m.PROJECT_ROUTES),

  },

from angular.

Ahh.. but the child in my code does sit inside a defer block, inside the parent! Maybe that is it

Yes, I've confirmed. It is because of the defer block! This is the same / similar bug to another error I had last month.
I'll upgrade Angular to see if the issue resolves...

from angular.

Resolved in Angular 17.3.8
Issue was a bug in Angular 17...
(ahh, after all that de-bugging!)

from angular.

It was indeed fixed by #54864

from angular.

Crumbs, but now I get the same re-cursion error as last time, after doing npm install @angular/core... : (

"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.8",
    "@angular/forms": "^17.3.2",
    "@angular/material": "^17.3.1",
    "@angular/material-experimental": "^17.3.5",
    "@angular/material-moment-adapter": "^17.3.5",
    "@angular/platform-browser": "^17.3.2",
    "@angular/platform-browser-dynamic": "^17.3.2",
    "@angular/router": "^17.3.2",
    "@material/web": "^1.4.1",
    "@ngrx/operators": "^17.2.0",
    "@ngrx/signals": "^17.2.0",
    "lodash": "^4.17.21",
    "material-components-web": "^14.0.0",
    "moment": "^2.30.1",
    "rfdc": "^1.3.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

from angular.

Closing as this issue has become more of a support request and requires a reproduction in order to debug. (Reproductions can be GitHub repositories). Please open a new issue with a reproduction if you are able to create one.

from angular.

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

from angular.