fix: dialog overlay after lazy loading child component

security-c4po-angular/src/app/app.module.ts

@@ -28,6 +28,7 @@ import {httpInterceptorProviders} from '@shared/interceptors';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {DialogService} from '@shared/services/dialog-service/dialog.service';
 import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog.module';
+import {OverlayContainer} from '@angular/cdk/overlay';
 
 @NgModule({
   declarations: [
@@ -37,14 +38,15 @@ import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog
     BrowserModule,
     AppRoutingModule,
     RouterModule,
-    FontAwesomeModule,
-    NbToastrModule.forRoot(), // used for notification service
-    BrowserAnimationsModule,
-    ThemeModule.forRoot(),
     NbLayoutModule,
+    NbDialogModule.forRoot(),
     NbCardModule,
     NbIconModule,
     NbButtonModule,
+    NbToastrModule.forRoot(), // used for notification service
+    FontAwesomeModule,
+    BrowserAnimationsModule,
+    ThemeModule.forRoot(),
     NbEvaIconsModule,
     ConfirmDialogModule,
     NgxsModule.forRoot([SessionState], {developmentMode: !environment.production}),
@@ -56,7 +58,6 @@ import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog
         deps: [HttpClient]
       }
     }),
-    NbDialogModule.forRoot(),
     HeaderModule,
     HomeModule,
     FlexLayoutModule
@@ -69,11 +70,12 @@ import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog
       multi: true,
       deps: [KeycloakService]
     },
+    OverlayContainer,
     KeycloakService,
     httpInterceptorProviders,
     NotificationService,
+    DialogService,
     NbDialogService,
-    DialogService
   ],
   bootstrap: [
     AppComponent

security-c4po-angular/src/app/project-overview/project-overview.module.ts

@@ -2,36 +2,34 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ProjectOverviewComponent} from './project-overview.component';
 import {ProjectOverviewRoutingModule} from './project-overview-routing.module';
-import {NbButtonModule, NbCardModule, NbDialogService, NbProgressBarModule} from '@nebular/theme';
+import {NbButtonModule, NbCardModule, NbProgressBarModule, NbSpinnerModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {TranslateModule} from '@ngx-translate/core';
 import {DateTimeFormatPipe} from '@shared/pipes/date-time-format.pipe';
-import {ProjectModule} from './project';
-import {ProjectDialogComponent} from '@shared/modules/project-dialog/project-dialog.component';
-import {DialogService} from '@shared/services/dialog-service/dialog.service';
 import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
+import {LoadingSpinnerComponent} from '@shared/widgets/loading-spinner/loading-spinner.component';
 
 @NgModule({
   declarations: [
     ProjectOverviewComponent,
-    DateTimeFormatPipe
+    DateTimeFormatPipe,
+    LoadingSpinnerComponent
   ],
   imports: [
     CommonModule,
-    ProjectOverviewRoutingModule,
     NbCardModule,
     NbButtonModule,
+    NbSpinnerModule,
+    NbProgressBarModule,
+    ProjectOverviewRoutingModule,
     FlexLayoutModule,
     FontAwesomeModule,
     TranslateModule,
-    NbProgressBarModule,
-    ProjectModule,
     ProjectDialogModule
   ],
-  providers: [
+  exports: [
-    DialogService,
+    LoadingSpinnerComponent
-    NbDialogService
   ]
 })
 export class ProjectOverviewModule {

security-c4po-angular/src/app/project-overview/project/project-routing.module.ts

@@ -1,12 +1,17 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {RouterModule, Routes} from '@angular/router';
-
+import {ProjectComponent} from './project.component';
 
+const routes: Routes = [
+  {
+    path: '',
+    component: ProjectComponent
+  },
+];
 
 @NgModule({
-  declarations: [],
+  imports: [RouterModule.forChild(routes)],
-  imports: [
+  exports: [RouterModule]
-    CommonModule
-  ]
 })
-export class ProjectRoutingModule { }
+export class ProjectRoutingModule {
+}

security-c4po-angular/src/app/project-overview/project/project.module.ts

@@ -2,28 +2,28 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {ProjectComponent} from './project.component';
-import {LoadingSpinnerComponent} from '@shared/widgets/loading-spinner/loading-spinner.component';
+import {NbCardModule, NbLayoutModule} from '@nebular/theme';
-import {NbCardModule, NbLayoutModule, NbSpinnerModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {TranslateModule} from '@ngx-translate/core';
+import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
+import {ProjectRoutingModule} from './project-routing.module';
 
 @NgModule({
   declarations: [
-    ProjectComponent,
+    ProjectComponent
-    LoadingSpinnerComponent
-  ],
-  exports: [
-    LoadingSpinnerComponent
   ],
   imports: [
     CommonModule,
+    NbCardModule,
+    NbLayoutModule,
     RouterModule.forChild([{
       path: '',
       component: ProjectComponent
     }]),
-    NbCardModule,
+    ProjectRoutingModule,
-    NbSpinnerModule,
+    TranslateModule,
     FlexLayoutModule,
-    NbLayoutModule,
+    ProjectDialogModule,
   ]
 })
 export class ProjectModule {

security-c4po-angular/src/shared/modules/project-dialog/project-dialog.module.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule} from '@angular/common';
 import {ProjectDialogComponent} from '@shared/modules/project-dialog/project-dialog.component';
 import {NbButtonModule, NbCardModule, NbDialogService, NbFormFieldModule, NbInputModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
@@ -17,12 +17,12 @@ import {ProjectDialogService} from '@shared/modules/project-dialog/service/proje
     CommonModule,
     NbCardModule,
     NbButtonModule,
+    NbFormFieldModule,
+    NbInputModule,
     FlexLayoutModule,
     FontAwesomeModule,
     TranslateModule,
-    ReactiveFormsModule,
+    ReactiveFormsModule
-    NbFormFieldModule,
-    NbInputModule,
   ],
   providers: [
     DialogService,
@@ -33,4 +33,5 @@ import {ProjectDialogService} from '@shared/modules/project-dialog/service/proje
     ProjectDialogComponent
   ]
 })
-export class ProjectDialogModule { }
+export class ProjectDialogModule {
+}