页面重新加载后延迟加载找不到某些模块声明

Question

我的应用包含

路由/home -> 应用模块
路由/dashboard -> Dashboard模块
路由/profile -> 配置文件模块
路由/事件 -> 事件模块
路由/服务 -> 服务模块

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

页面重新加载后的所有导航组合都运行良好。无论从哪里到哪里。

例如：

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

但只有在页面重新加载后，一个导航才不起作用：

事件 -> 仅仪表板不起作用！页面重新加载后的所有其他路由都有效！

我收到

的错误

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

这是我的代码：

应用模块


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

和 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, 使用了它在找不到它时出错，如果我将它移动到共享组件不会失败。

但是，这很愚蠢，因为只有仪表板组件使用它，并且如果没有页面重新加载或来自另一个模块的导航，一切都可以正常工作。

有线索吗？

我知道我要问的问题很难，它甚至可能是一个 angular 错误，但我主要是在寻找任何线索，或者将我的脖子转向哪里。

经过一番调查，问题更多是关于

App.module ChildA.module ChildB.module

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

ComponentForChildA、ComponentForChildB 以及它们基于 ComponentAbstractClass

Answer 1

这与 IVY 和此处所述的继承问题有关 https://hackmd.io/@alx/S1XKqMZeS

我有一个没有任何装饰器的抽象类。

通过升级到 Angular 9（迁移）添加装饰器解决了这个

页面重新加载后延迟加载找不到某些模块声明

Lazy loading after page reload cannot find some module declarations

lazy-loading

angular