Lazy loading after page reload cannot find some module declarations

My app consists of

• Route /home -> app module
• Route /dashboard -> Dashboard module
• Route /profile -> profile module
• Route /event -> event module
• Route /services -> services module

I am using lazy loading and all works well

All navigation combinations after a page reload work well. Not matter from where to where.

Eg:

Profile -> Dashboard Services -> Dashboard Home -> Dashboard etc

But only after a page reload one navigation does not work:

event -> Dashboard doesn't work only! All other routing after page reload works !

I get errors of

breadcrumbs.js:64 ERROR Error: Template error: Can't bind to 'data' since it isn't a known property of 'app-timeline-chart'.

Here is my code:

appModule

declare function require(moduleName: string): any;

const {version: appVersion} = require('../../package.json');

Sentry.init({
  dsn: 'https://[email protected]/1194244',
  environment: environment.production ? 'Production' : 'Development',
  release: appVersion,
});


@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {
  }

  handleError(error) {
    // Sentry.showReportDialog({ eventId });
    // const eventId = Sentry.captureException(error.originalError || error);
    console.log(error);
    Sentry.captureException(error)
  }
}


@NgModule({
  imports: [
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
    AngularFireFunctionsModule,
    AngularFireStorageModule,
    AngularFireAuthModule,
    AngularFirePerformanceModule,
    MaterialModule,
  ],
  declarations: [
    AppComponent,
    SideNavComponent,
    HomeComponent,
    EventFormComponent,
    ActivityFormComponent,
  ],
  entryComponents: [
    EventFormComponent,
    ActivityFormComponent,
  ],
  providers: [
    // {provide: ErrorHandler, useClass: SentryErrorHandler}
    {provide: ErrorHandler, useClass: environment.production ? SentryErrorHandler : ErrorHandler},
    {provide: MatPaginatorIntl, useClass: MatPaginatorIntlFireStore},
    {provide: FunctionsRegionToken, useValue: 'europe-west2'}
  ],
  bootstrap: [AppComponent],
})

export class AppModule {
}

And the dashboardModule

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    DashboardRoutingModule
  ],
  exports: [
  ],
  declarations: [
    DashboardComponent,
    UploadComponent,
    UploadInfoComponent,
    ChartsPieComponent,
    ChartsXYComponent,
    ChartsTimelineComponent,
    SummariesComponent,
    ChartActionsComponent,
    EventSearchComponent,
    EventsExportFormComponent,
    EditInputComponent,
    UploadErrorComponent,
    ActivityMetadataComponent,
    EventTableComponent,
  ],
  entryComponents: [
    UploadErrorComponent,
    EventsExportFormComponent,
  ],
  providers: [
  ]
})



export class DashboardModule { }

As you saw on the error the specific component ChartsTimelineComponent, used that it errors on not finding it, if I move it to a shared component does not fail.

However, that is silly because only dashboard component uses it, and if there was no page reload or navigation from another module all works fine.

Any clue?

I know its very hard what I am asking , it might be even an angular bug but I am mainly searching for any clues , or where to turn my neck to.

After some investigation the question is more about

App.module ChildA.module ChildB.module

ChildA and ChildB have components that base on the same abstract class meaning that they both eg have

ComponentForChildA, ComponentForChildB and they base on ComponentAbstractClass