After adding a new route to one of the app modules (Angular 15) I had to refactor the main routing component and wrap it into a shell component which is simply this: import { Component } from '@angular/core'; import { NAVIGATION_ROUTES } from '../../@shared'; @Component({ selector: 'calendar-shell', template: `<router-outlet></router-outlet>` }) export class CalendarShellComponent { public componentPath = NAVIGATION_ROUTES.calendar.path; } This solved a routing problem but suddenly the component which used to handle all the routing (for the last 4 years) and still handles some and is basically the main orchestrator for one of the major features, is littered with change detection errors – and I just can't put an end to it. Most (but not all) of the core variables are set via some kind of subscriptions to service BehaviorSubjects, Subjects, etc. However this has no effect on the change detection cycle and the cdr errors sometimes come at one place, then at another place. Most of the children components consume those variable via inputs. I tried adding OnPush and trigger cdr manually, but it also didn't help - I have to wiggle the mouse for the changes to be detected. Any ideas how I can approach this very annoying problem? I know, there is not much detail on it – but the component and its template are way too large to post here, and also not something out of this world regarding complexity. Just basic subscriptions, inputs, and that's it. Would appreciate any ideas. Continue reading...
