页面重新加载后的延迟加载找不到某些模块声明 [英] Lazy loading after page reload cannot find some module declarations

问题描述

我的应用包含

• 路线/home->应用程序模块
• 路线/dashboard->仪表板模块
• 路线/配置文件->配置文件模块
• 路线/事件->事件模块
• 路线/服务->服务模块

我正在使用延迟加载，并且一切正常

I am using lazy loading and all works well

页面重新加载后的所有导航组合都可以正常工作.不管从哪里到哪里.

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

例如:

个人资料->仪表板 服务->仪表板 首页->仪表板 等等

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 !

我得到

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

这是我的代码:

appModule

appModule

declare function require(moduleName: string): any;

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

Sentry.init({
  dsn: 'https://[e-mail]/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 {
}

还有dashboardModule

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

您在错误中看到的是特定组件ChartsTimelineComponent,所使用的错误，即如果我将其移至共享组件，则找不到该错误.

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.

有任何线索吗?

我很难知道我要问的是什么，它甚至可能是一个有角度的错误，但我主要是在寻找任何线索或将脖子转向何处.

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

App.module ChildA.module ChildB.module

ChildA和ChildB具有基于相同抽象类的组件，这意味着它们都具有

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

ComponentForChildA，ComponentForChildB，它们基于ComponentAbstractClass

ComponentForChildA, ComponentForChildB and they base on ComponentAbstractClass

推荐答案

这与IVY和继承问题有关，如此处所述

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.

通过升级到Angular 9(迁移)添加装饰器解决了此问题

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

这篇关于页面重新加载后的延迟加载找不到某些模块声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！