Lazy loading with Angular, can't find component

Question

I hava a Angular application in 6. And I try to get Lazy loading working. But if I remove the module that has to be lazy loaded. Then the Application gets a error.

Of course looked for video's and googled a lot. But it is a specific case.

So the part that will be responsible for lazy loading will be documents.

The Module looks like this:

@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,
    ],
})

and the dossier.routing.module file looks like this:

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

And then in the app.routes.ts file. I do this:

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

But when I remove the DossierModule from the app.module.ts. The app.module.ts file looks now like this:

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

Then I will get this error:

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)

Thank you

What I do wrong then? Because I have the component:

DossierNavigationComponent

in the dossier.module.ts file.

This is the shared module:

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

oh, I still get this error:

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)

So I moved the component: PdfViewerComponent to the dossier.module,like this:

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

But that doesn, helped.

The 'app-pdf-viewer' looks like this:

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

If the DossierNavigationComponent is used in AppModule and DossierModule, then it should be declared in both modules. A good pattern to achieve that is to create a SharedModule that holds DossierModule in its declarations (other similar components as well) and added to the imports of AppModule and DossierModule

Answer 2

Your pdf viewer module, which is not lazily loaded, has an html element for dossier navigation.

Not sure what the easiest way to resolve this will be, as I don't know the full use case and user flows.