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

【问题标题】：Lazy loading after page reload cannot find some module declarations页面重新加载后延迟加载找不到某些模块声明
【发布时间】：2019-10-31 19:02:59
【问题描述】：

我的应用由

路由 /home -> 应用模块
路由/仪表板->仪表板模块
路由 /profile -> 配置文件模块
路由/事件->事件模块
路由 /services -> 服务模块

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

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

例如：

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

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

event -> Dashboard 不仅仅工作！页面重新加载后的所有其他路由都有效！

我得到了

的错误

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

还有仪表盘模块

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

但是，这很愚蠢，因为只有仪表板组件使用它，如果没有页面重新加载或从另一个模块导航，一切正常。

有什么线索吗？

我知道我在问什么很难，它甚至可能是一个角虫，但我主要是在寻找任何线索，或者我的脖子转向哪里。

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

App.module ChildA.模块 ChildB.module

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

ComponentForChildA、ComponentForChildB 以及它们基于 ComponentAbstractClass

【问题讨论】：

您在哪个组件中调用app-timeline-chart？你的breadcrumb.js 在哪里？
首先从 AppModule 中拉出 SharedModule，它是唯一不应该导入它的地方，因为这样你就让它成为全局的，它违背了将它放在其他模块中的目的。其次，检查 ChartsTimelineComponent 是否仅在 DashboardModule 中声明的组件中使用，以及 breadcrumbs.js 与此有什么关系？这让我觉得你的 ChartsTimelineComponent 在仪表板之外还有另一个参考
我有点关注这个问题。多谢你们。这是交易，两个子模块（仪表板和事件）都加载基于公共抽象的组件。成分不同。例如，仪表板模块的“xy-chart”和事件模块的event-chart。例如，从事件模块中删除事件图表可以解决此问题。所以问题是：应该如何处理共享同一个抽象类的模块及其组件。
@NerijusPamedytis 做到了，谢谢你的提示，忘记了
面包屑也是哨兵

标签： angular lazy-loading

【解决方案1】：

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

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

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

【讨论】：