Question

我的应用包含

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

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

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

例如：

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

但仅在页面重新加载后，一种导航无效：

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

我得到

的错误

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

这是我的代码：

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

还有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,会因为找不到它而出错。

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

有任何线索吗？

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

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

App.module ChildA.module ChildB.module

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

ComponentForChildA，ComponentForChildB，它们基于ComponentAbstractClass

Answer 1

这与IVY和此处https://hackmd.io/@alx/S1XKqMZeS

中所述的继承问题有关。

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

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

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

1 个答案: