CODEWITHSUNDEEP
javascriptangularlazy-loadingpdf-viewer
mightycode Newton
mightycode Newton

Reputation: 3949

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

I try to get lazy loading working. But when I remove de module who is responsible for lazy loading in the app.module. The application doesn't work anymore.

Googled a lot. Changed code

So I have a dossier.module.ts, like this:

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

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

And I have a 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]  },
    ]
  },
];

and in the app.module.ts I removed the dossierModule. But I still get this error:

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)

But how is this possible? Because I have PdfViewerComponent included in de dossier.module.ts.

So how to fix this?

Thank you

and in the app.routes.ts file I have this:

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

and the imports of app.module.ts looks now like this:

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

oke, this is the hole: 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 {}

my app.routes.ts file looks like this:

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

and for example settingsRoutingModule looks like this:

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

But if I remove the SettingsAccountModule from the app.module.ts file. The application breaks.

So for example I do this in the app.module.ts then the application Angular cant find the components anymore.

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

Upvotes: 0

Views: 559

Answers (1)

Robert garcia
Robert garcia

Reputation: 591

Update: You need to import your failing component in the module which is throwing the error, also use AOT with your ng serve script

You need to add your reusable components in your module in the exports array:

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

Upvotes: 1

Related Questions