How to share components through lazy loaded module and app.module.ts?

Question

The whole replication of my problem you can find on stackblitz

https://stackblitz.com/edit/angular-x7omka?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fhello.component.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fdashboard%2Fdashboard%2Fdashboard-routing.module.ts,src%2Fapp%2Fdashboard%2Fdashboard%2Fdashboard.module.ts

The explanation is below

I have dashboard, album and modal component.

Modal component is used by album and by dashboard component.

APP COMPONENT

<button routerLink="./dashboard">Go to dashboard</button>
<button routerLink="./albums">Go to albums</button>

<router-outlet></router-outlet>

*DASHBOARD COMPONENT

<p>dashboard works!</p>

<app-modal></app-modal>

ALBUMS COMPONENT

<p>albums works!</p>

<app-modal></app-modal>

APP MODULE TS

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [
    AppComponent,
    HelloComponent,
    DashboardComponent,
    ModalComponent,
    AlbumsComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

APP ROUTING MODULE

import { AlbumsComponent } from './albums/albums.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'albums', component: AlbumsComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

so as you can see i have basic angular 6 application where if i want to use some components i need to declare them in the declarations array in the app.module.ts file.

The problem happens when i want to make my dashboard component lazy loaded. So one component to be lazy loaded i need to have feature module for my dashboard component so i do the following:

ng g m dashboard To create new module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from '../dashboard.component';
import { ModalComponent } from 'src/app/modal/modal.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    DashboardComponent,
    ModalComponent
  ],
  exports: [
    ModalComponent
  ]
})
export class DashboardModule { }

inside that module in declarations array i am writing also ModalComponent because that component is used by the Dashboard page - and i write in the exports array ModalComponent because i will get error - because modal component is used also in album component and app.module.ts needs it.

After that my app.module.ts looks like this

@NgModule({
  declarations: [
    AppComponent,
    // DashboardComponent,
    AlbumsComponent,
    // ModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

i commented the imports here because the component can be declared in the declarations array in only one module.

Now when i want to lazy load the dashboard module i created dashboard-routing.module.ts file

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from '../dashboard.component';
const appRoutes: Routes = [

    {
        path: 'dashboard',
        children: [
            { path: '', component: DashboardComponent },
        ]
    }
];


@NgModule({
    imports: [RouterModule.forChild(appRoutes)],
    exports: [RouterModule]
})
export class DashboardRoutingModule { }

and i import it in the Dahboard Module in imports array

imports: [
    CommonModule,
    DashboardRoutingModule
  ],

after that i remove the Dashboard Module from app.module.ts and i write the lazy loaded route in app-routing.module.ts file

const routes: Routes = [
  { path: 'dashboard', loadChildren: './dashboard/dashboard/dashboard.module#DashboardModule' },
  { path: 'albums', component: AlbumsComponent },
];

now i get error

If 'app-modal' is an Angular component, then verify that it is part of this module.

Why i get this error ? And how can i solve this ? How can i lazy loaded routes on demand that have other dependencies and to not break the things ?

I need to lazy load dashboard component

** what i tried**

I tried to have shared module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from '../modal/modal.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ModalComponent
  ],
  exports: [
    ModalComponent
  ]
})
export class SharedModule { }

i imported this shared module inside imports array of my app.module.ts file

then i have this error

ModalComponent is part of the declarations of 2 modules: SharedModule and DashboardModule!