使用Angular延迟加载，找不到组件

Question

我在 6 中有一个 Angular 应用程序。我尝试让延迟加载工作。但是，如果我删除必须延迟加载的模块。然后应用程序出现错误。

当然寻找视频和谷歌搜索了很多。但这是一个特定的案例。

所以负责延迟加载的部分将是文档。

模块如下所示：

@NgModule({

    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
        DossierRoutingModule,
        SharedModule
        ],

    declarations: [
        DossierComponent,
        DossierCorrespondenceComponent,
        DossierCorrespondenceItemComponent,
        DossierEntryComponent,
        DossierEntrySummaryComponent,
        DossierHistoryComponent,
        DossierLabComponent,
        DossierMedicationComponent,
        DossierMiscComponent,
        DossierNavigationComponent,
        DossierPhysicalComponent,
    ],

exports: [
        DossierComponent,
        DossierCorrespondenceComponent,
        DossierCorrespondenceItemComponent,
        DossierEntryComponent,
        DossierEntrySummaryComponent,
        DossierHistoryComponent,
        DossierLabComponent,
        DossierMedicationComponent,
        DossierMiscComponent,
        DossierNavigationComponent,
        DossierPhysicalComponent,
    ],
})

dossier.routing.module 文件如下所示：

const dossierRoutes = [
  {
    path: '',
    component: DossierComponent,
    canActivate: [AuthGuard],
    children: [
      {path: '', redirectTo: 'voorgeschiedenis', pathMatch: 'full', CanActivate: [AuthGuard]  },
      {path: 'voorgeschiedenis', component: DossierHistoryComponent, CanActivate: [AuthGuard]  },
      {path: 'lichamelijk', component: DossierPhysicalComponent, CanActivate: [AuthGuard]  },
      {path: 'lab', component: DossierLabComponent, CanActivate: [AuthGuard]  },
      {path: 'overig', component: DossierMiscComponent, CanActivate: [AuthGuard]  },
      {path: 'medicatie', component: DossierMedicationComponent, CanActivate: [AuthGuard]   },
      {path: 'correspondentie', component: DossierCorrespondenceComponent, CanActivate: [AuthGuard]  },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(dossierRoutes)],
  exports: [RouterModule]
})

export class DossierRoutingModule {}

然后在 app.routes.ts 文件中。我这样做：

{path: '', redirectTo: '/dossier', pathMatch: 'full'},
  {path: 'dossier', loadChildren: './dossier/dossier.module#DossierModule' },

但是当我从 app.module.ts 中删除 DossierModule 时。 app.module.ts 文件现在看起来像这样：

imports: [
    AdviceModule,
    TrainingModule,
    MeasurementModule,
    SettingsAccountModule,
    ObjectiveModule,
    TodoModule,
    PanelModule,
    EcheqModule,
    SharedModule,
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    DragulaModule.forRoot(),
    RouterModule,
    ChartsModule,
    PdfViewerModule,
    HttpClientModule
  ],

然后我会得到这个错误：

compiler.js:215 Uncaught Error: Template parse errors:
'app-dossier-navigation' is not a known element:
1. If 'app-dossier-navigation' is an Angular component, then verify that it is part of this module.
2. If 'app-dossier-navigation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-dossier-navigation></app-dossier-navigation>
<app-pdf-viewer [pdfTitle]="fileName" (back)="hand"): ng:///AppModule/DossierPdfComponent.html@0:0
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)

谢谢

那我做错了什么？因为我有组件：

DossierNavigationComponent

在dossier.module.ts 文件中。

这是共享模块：

@NgModule({

    imports: [CommonModule, RouterModule, ChartsModule],

    // tslint:disable-next-line: max-line-length
    declarations: [
       IsLoadingComponent,
       MeasurementNavigationComponent,
       ModalComponent, TopbarComponent,
       MeasurementGraphComponent,
       ResourceItemComponent,
       Vital10PageComponent,
       VpointStickerComponent
      ],

    // tslint:disable-next-line: max-line-length
    exports: [
      IsLoadingComponent,
      MeasurementNavigationComponent,
      ModalComponent, TopbarComponent,
      MeasurementGraphComponent,
      ResourceItemComponent,
      Vital10PageComponent,
      VpointStickerComponent
        ]

})

export class SharedModule {}

哦，我仍然收到此错误：

Uncaught Error: Template parse errors:
Can't bind to 'pdfTitle' since it isn't a known property of 'app-pdf-viewer'.
1. If 'app-pdf-viewer' is an Angular component and it has 'pdfTitle' input, then verify that it is part of this module.
2. If 'app-pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("cklink]="{url: '/informatie', label: 'Terug'}"></app-topbar>
<app-pdf-viewer [hidden]="!pdfLoaded" [ERROR ->][pdfTitle]="brochureName" (back)="handlePdfBack()" >
</app-pdf-viewer>
"): ng:///AppModule/BrochureDetailComponent.html@1:38
'app-pdf-viewer' is not a known element:
1. If 'app-pdf-viewer' is an Angular component, then verify that it is part of this module.
2. If 'app-pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<app-topbar [backlink]="{url: '/informatie', label: 'Terug'}"></app-topbar>
[ERROR ->]<app-pdf-viewer [hidden]="!pdfLoaded" [pdfTitle]="brochureName" (back)="handlePdfBack()" >
</app-pdf"): ng:///AppModule/BrochureDetailComponent.html@1:0
    at syntaxError (compiler.js:215)

所以我将组件：PdfViewerComponent 移到了 dossier.module 中，如下所示：

 declarations: [
        DossierComponent,
        DossierCorrespondenceComponent,
        DossierCorrespondenceItemComponent,
        DossierEntryComponent,
        DossierEntrySummaryComponent,
        DossierHistoryComponent,
        DossierLabComponent,
        DossierMedicationComponent,
        DossierMiscComponent,
        DossierNavigationComponent,
        DossierPhysicalComponent,
        DossierPdfComponent,
        PdfViewerComponent

但这并没有帮助。

'app-pdf-viewer' 看起来像这样：

export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
  pdfUrl: string;
  @Input() pdfTitle: string;
  @Output() back: EventEmitter<boolean> = new EventEmitter();
  pdfReadyProxy: any;
  selectedPage: number;
  numPages: number;
  zoom: number;
  @ViewChild(PdfViewerControlsComponent) controls: PdfViewerControlsComponent;
  ng2pdfContainerElement: any; // already a native element
  pdfViewerElement: any; // already a native element
  pdfViewerWrapperElement: any;
  pdfRendered = false;
  runningInApp = false;

Answer 1

您的未延迟加载的 pdf 查看器模块具有用于文档导航的 html 元素。

不确定解决此问题的最简单方法是什么，因为我不知道完整的用例和用户流程。

Answer 2

如果DossierNavigationComponent 用于AppModule 和 DossierModule，那么它应该在两个模块中声明。实现这一目标的一个好模式是创建一个SharedModule，在其declarations（其他类似组件）中保存DossierModule，并添加到AppModule和DossierModule的imports中