无法绑定到 'pdfTitle'，因为它不是 'app-pdf-viewer' 的已知属性

Question

我尝试让延迟加载工作。但是当我在 app.module 中删除负责延迟加载的 de 模块时。该应用程序不再有效。

用谷歌搜索了很多。更改代码

所以我有一个 dossier.module.ts，像这样：

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

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

我有一个 DossierRoutingModule：

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]  },
    ]
  },
];

并且在 app.module.ts 中我删除了 dossierModule。但我仍然收到此错误：

compiler.js:215 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)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

但这怎么可能呢？因为我在 de dossier.module.ts.

中包含了 PdfViewerComponent

那么如何解决这个问题？

谢谢

在 app.routes.ts 文件中我有这个：

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

app.module.ts 的导入现在看起来像这样：

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

好的，这是洞：dossier.module.ts:

@NgModule({

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

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

    exports: [
        DossierComponent,
        DossierCorrespondenceComponent,
        DossierCorrespondenceItemComponent,
        DossierEntryComponent,
        DossierEntrySummaryComponent,
        DossierHistoryComponent,
        DossierLabComponent,
        DossierMedicationComponent,
        DossierMiscComponent,
        DossierNavigationComponent,
        DossierPhysicalComponent,
        DossierPdfComponent,
        PdfViewerComponent,
        BrochureDetailComponent,
        //PdfViewerControlsComponent,
        TopbarComponent
    ],
})

export class DossierModule {}

我的 app.routes.ts 文件如下所示：

const routes: Routes = [
  {
    path: 'auth',
    component: AuthCallbackComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {path: '', redirectTo: '/dossier', pathMatch: 'full'},
  {path: 'dossier', loadChildren: './dossier/dossier.module#DossierModule' },

  {path: 'instellingen', loadChildren: './settings/settings.account.module#SettingsAccountModule'},


  {
    path: 'gezondheid',
    component: HealthComponent,
    canActivate: [AuthGuard]
  },
    {
      path: 'gezondheid/edit',
      component: AddIndicatorComponent,
      canActivate: [AuthGuard]
    },
    {
      path: 'gezondheid/Measurement/:meting',
      component: MeasurementComponent,
      canActivate: [AuthGuard]
    },
   {
     path: 'gezondheid/Lifestyle/:task',
     component: TaskComponent,
     canActivate: [AuthGuard]
   },
  {
    path: 'webshop',
    component: WebshopComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'selfcare',
    component: SelfcareComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/archief',
    component: AdviceArchiveComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'informatie',
    component: AdviceInformationComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'informatie/brochure/:brochure',
    component: BrochureDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/:advies',
    component: AdviceComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/detail/:id',
    component: AdviceDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies',
    redirectTo: 'advies/huidig',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  {
    path: 'chat',
    component: ChatFullComponent,
    canActivate: [AuthGuard]
  },

  {
    path: 'hulpbronnen',
    component: ResourcePageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'hulpbronnen/detail/:hulpbronId',
    component: ResourceDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'echeq',
    component: EcheqOverviewComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'echeq/detail/:echeqId',
    component: EcheqProcessComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'help',
    component: HelpPageComponent,
    canActivate: [AuthGuard]
  },

   {
     path: 'instellingen/organisatie/:id',
     component: SettingsOrganisationDetailComponent,
     canActivate: [AuthGuard],
     pathMatch: 'full'
   },
  {
    path: 'trainingen',
    component: TrainingComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'doel/:id',
    component: ObjectiveComponent,
    canActivate: [AuthGuard]
  },
   {
     path: 'doelen',
     component: ObjectiveListComponent,
     canActivate: [AuthGuard]
   },
  {
    path: 'trainingen/:training',
    component: TrainingDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules})
  ],
  exports:[RouterModule]
})

export class AppRoutingModule {}

例如 settingsRoutingModule 看起来像这样：

const settingsRoutes: Routes = [

  {
    path: '',
    component: SettingsNavigationComponent,
    canActivate: [AuthGuard],
    children: [
     {path: '', redirectTo: 'account', pathMatch: 'full', canActivate: [AuthGuard] },
     {path: 'account', component: SettingsAccountComponent, canActivate: [AuthGuard] },

     {path: 'apparaten' , component: SelfcareComponent, canActivate: [AuthGuard] },
     {path: 'apps' , component: SettingsAppsComponent, canActivate: [AuthGuard] },
     {path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent, canActivate: [AuthGuard] },
     {path: 'algemeen' , component: SettingsGeneralComponent, canActivate: [AuthGuard] },
     { path: 'algemeen', component: SettingsGeneralComponent, canActivate: [AuthGuard] },
     {path: 'log' , component: SettingsLogComponent, canActivate: [AuthGuard] },
    ]
   },
];


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

export class SettingsRoutingModule {}

但是如果我从 app.module.ts 文件中删除 SettingsAccountModule。应用程序中断。

例如，我在 app.module.ts 中执行此操作，然后应用程序 Angular 无法再找到组件。

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

Answer 1

更新：您需要在抛出错误的模块中导入失败的组件，同时将 AOT 与您的 ng 服务脚本一起使用

您需要在导出数组的模块中添加可重用组件：

@NgModule({

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

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

    exports: [
        DossierComponent,
        DossierCorrespondenceComponent,
        DossierCorrespondenceItemComponent,
        DossierEntryComponent,
        DossierEntrySummaryComponent,
        DossierHistoryComponent,
        DossierLabComponent,
        DossierMedicationComponent,
        DossierMiscComponent,
        DossierNavigationComponent,
        DossierPhysicalComponent,
        DossierPdfComponent,
        PdfViewerComponent,
        BrochureDetailComponent,
        //PdfViewerControlsComponent,
        TopbarComponent
    ],
})

export class DossierModule {}

无法绑定到 'pdfTitle'，因为它不是 'app-pdf-viewer' 的已知属性

Can't bind to 'pdfTitle' since it isn't a known property of 'app-pdf-viewer'

javascript

angular

lazy-loading

pdf-viewer

无法绑定到 'pdfTitle'，因为它不是 'app-pdf-viewer' 的已知 属性

Can't bind to 'pdfTitle' since it isn't a known property of 'app-pdf-viewer'

javascript

angular

lazy-loading

pdf-viewer

无法绑定到 'pdfTitle'，因为它不是 'app-pdf-viewer' 的已知属性