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://e6aa6074f13d49c299f8c81bf162d88c@sentry.io/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

回答1:

This is related to IVY and the inheritance issue as described here https://hackmd.io/@alx/S1XKqMZeS

I had abstract classes that did not have any decorators.

Adding the decorators via upgrading to Angular 9 (migration) solved this

来源：https://stackoverflow.com/questions/58649778/lazy-loading-after-page-reload-cannot-find-some-module-declarations

标签

angular

lazy-loading