Ленивая загрузка с Angular, не могу найти компонент

У меня есть приложение Angular в 6. И я пытаюсь заставить работать ленивую загрузку. Но если я удалю модуль, который должен быть загружен лениво. Затем Приложение получает ошибку.

Конечно, искал видео и много гуглил. Но это конкретный случай.

Таким образом, за ленивую загрузку будут отвечать документы.

Модуль выглядит так:

@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' },

Но когда я удаляю DossierModule из app.module.ts. Файл 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;