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

我的应用程序包括

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

我使用的是惰性加载，一切都很好

重新加载页面后，所有导航组合都能正常工作。不管从哪里到哪里

例如：

配置文件->仪表板 服务->仪表板 主页->仪表板 等

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

事件->仪表板不能只工作！页面重新加载后的所有其他路由工作

我犯了错误

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，

使用它在找不到它时出错，如果我将其移动到共享组件，则不会失败

然而，这是愚蠢的，因为只有仪表板组件使用它，若并没有页面重新加载或来自另一个模块的导航，所有的工作都很好

有线索吗

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

经过一些调查，这个问题更多的是关于

应用程序模块 儿童模块 儿童模块

ChildA和ChildB的组件基于它们各自所具有的相同抽象类含义

---

ComponentForChildA，ComponentForChildB，它们基于ComponentAbstractClass

这与IVY和此处描述的继承问题有关

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

---

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

您在哪个组件中调用

应用程序时间线图

？您的

breadcrumb.js

在哪里？首先，从AppModule中提取SharedModule，它是您不应该导入它的唯一地方，因为这样您会使它成为全局的，它会破坏在其他模块中使用它的目的。其次，检查ChartsTimelineComponent是否仅在DashboardModule中声明的组件中使用，以及breadcrumbs.js与此有何关系？这让我觉得在仪表板之外还有一个关于ChartsTimelineComponent的参考，我有点关注这个问题。谢谢各位。这里是交易，两个子模块（dasboard和event）加载基于公共抽象的组件。组件是不同的。例如，仪表板模块上的“xy图表”，以及事件模块上的

事件图表。从事件模块中删除事件图表可以解决此问题。所以问题是：对于共享同一抽象类的模块及其组件，我们应该怎么做呢？@NerijusPamedytis做到了这一点，谢谢你的提示，忘了面包屑也是哨兵