3

I have a large application, that I have decided to split into multiple lazy loaded modules. While this worked for 'smaller' modules, for the bigger ones, I discovered that sometimes/most of the time, the views related to these modules, are not run with angulars change detection, like nothing had changed.

The application itself its quite large, so to sum it up, gonna post a 'snippet bellow'. The changes that come from the logic layer, like waiting for services to finish, and showing the results in the template, its not updating.

The weird part is that once I hit a key on the keyboard, it resumes, or either calling manual detection with ChangeDetectorRef markForCheck. This behavior happens randomly, and mostly for the bigger lazy loaded modules.

Has anyone had any issues before with lazy loaded modules, its the first time Im using this approach and maybe Im missing something, any help is very much appreciated. The template used its a regular one, having subscriptions on the ngOnInit level, nothing really fancy about it. The services are called, I've checked it multiple times, but the issue is that the data rendered in the view does not update. This exact component worked perfect, until the change into a lazy loaded module.

Lazy loaded module:

@NgModule({
    imports: [
        ...multiple modules
        RouterModule.forChild(homeRoutes),
    ],
    providers: [...multiple services],
    declarations: [HomeComponent]
})

export class HomeModule {
}

Parent where this module is called(which is called in the appModule)

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HttpClientModule,
        MatTooltipModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        RouterModule.forChild(mainRoutes),
        ToolsModule,
        BMWTranslateModule,
        ModalModule,
    ],
    providers: [HttpClient, MainServiceState, AppState, RouterService, ...etc],
    declarations: [MainComponent, NavbarComponent],
    exports: [MainComponent]
})

export class MainModule {
}

and the router associated with it:

export const mainRoutes: Routes = [
{
    path: 'home',
    loadChildren: './../home/#HomeModule'
},
{...other lazy loaded modules}]
RGLSV
  • 2,018
  • 1
  • 22
  • 37
  • It happened with me many times, I would like to suggest you below things 1. Try to remove all the errors 2. Using async pipes in your html. 3. Use ngIf in html so that it will render content only when object set's in the ts file. Try to avoid using manual change detection. – Ashitosh birajdar Jul 11 '19 at 12:18
  • Yep, already tried this, no errors found, I've actually tried removing everything from the component, making it as simple as possible, but the same behavior remains, and running out of ideas. Could it be something with the angular version? – RGLSV Jul 11 '19 at 13:15
  • Not a version issue, could check with changes detection strategies for your component? – Ashitosh birajdar Jul 12 '19 at 13:37
  • A different change detection strategy was not specified, other than what it ships by default, I've left the components with this trouble issue as simple as possible, and this is still reproduce able – RGLSV Jul 12 '19 at 14:13
  • Have you found a solution to this? I have the same problem on Angular 7 – perrohunter Jul 18 '19 at 23:43

0 Answers0