refactor: use native lazy loading for LoginModalComponent (#215)

intershop · May 12, 2020 · 382b2dd · 382b2dd
1 parent 3b99556
commit 382b2dd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 37 deletions.
diff --git a/src/app/core/guards/login.guard.ts b/src/app/core/guards/login.guard.ts
@@ -7,11 +7,11 @@ import { filter, first } from 'rxjs/operators';
 import { getDeviceType } from 'ish-core/store/configuration';
 import { getUserAuthorized } from 'ish-core/store/user';
 import { whenTruthy } from 'ish-core/utils/operators';
-import { LazyLoginModalComponent } from 'ish-shell/header/lazy-login-modal/lazy-login-modal.component';
+import { LoginModalComponent } from 'ish-shared/components/login/login-modal/login-modal.component';
 
 @Injectable({ providedIn: 'root' })
 export class LoginGuard implements CanActivate {
-  private currentDialog: NgbModalRef<typeof LazyLoginModalComponent>;
+  private currentDialog: NgbModalRef;
   private isMobile: boolean;
 
   constructor(private modalService: NgbModal, private router: Router, private store: Store<{}>) {
@@ -23,7 +23,7 @@ export class LoginGuard implements CanActivate {
       .subscribe(type => (this.isMobile = type === 'mobile'));
   }
 
-  canActivate(route: ActivatedRouteSnapshot, _: RouterStateSnapshot) {
+  async canActivate(route: ActivatedRouteSnapshot, _: RouterStateSnapshot) {
     // first request should go to page
     if (!this.router.navigated) {
       return true;
@@ -41,11 +41,16 @@ export class LoginGuard implements CanActivate {
 
     const returnUrl = route.queryParams.returnUrl || '/home';
 
-    this.currentDialog = this.modalService.open(LazyLoginModalComponent, { centered: true, size: 'sm' });
-    this.currentDialog.componentInstance.loginMessageKey = route.queryParamMap.get('messageKey');
+    const component = await (await import('../../shared/components/login/login-modal/login-modal.component'))
+      .LoginModalComponent;
+
+    this.currentDialog = this.modalService.open(component, { centered: true, size: 'sm' });
+
+    const loginModalComponent = this.currentDialog.componentInstance as LoginModalComponent;
+    loginModalComponent.loginMessageKey = route.queryParamMap.get('messageKey');
 
     // dialog closed
-    this.currentDialog.componentInstance.close.pipe(first()).subscribe(() => {
+    loginModalComponent.close.pipe(first()).subscribe(() => {
       this.currentDialog.dismiss();
     });
 

diff --git a/src/app/shell/header/lazy-login-modal/lazy-login-modal.component.html b/src/app/shell/header/lazy-login-modal/lazy-login-modal.component.html
diff --git a/src/app/shell/header/lazy-login-modal/lazy-login-modal.component.ts b/src/app/shell/header/lazy-login-modal/lazy-login-modal.component.ts
diff --git a/src/app/shell/shell.module.ts b/src/app/shell/shell.module.ts
@@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
 import { NgbCollapseModule, NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { DeferLoadModule } from '@trademe/ng-defer-load';
-import { ReactiveComponentLoaderModule } from '@wishtack/reactive-component-loader';
 
 import { ClickOutsideDirective } from 'ish-core/directives/click-outside.directive';
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
@@ -23,7 +22,6 @@ import { HeaderNavigationComponent } from './header/header-navigation/header-nav
 import { HeaderSimpleComponent } from './header/header-simple/header-simple.component';
 import { HeaderComponent } from './header/header/header.component';
 import { LanguageSwitchComponent } from './header/language-switch/language-switch.component';
-import { LazyLoginModalComponent } from './header/lazy-login-modal/lazy-login-modal.component';
 import { LoginStatusComponent } from './header/login-status/login-status.component';
 import { MiniBasketComponent } from './header/mini-basket/mini-basket.component';
 import { ProductCompareStatusComponent } from './header/product-compare-status/product-compare-status.component';
@@ -52,10 +50,6 @@ const exportedComponents = [
     PipesModule.forRoot(),
     QuickorderExportsModule,
     QuotingExportsModule,
-    ReactiveComponentLoaderModule.withModule({
-      moduleId: 'ish-shared',
-      loadChildren: () => import('../shared/shared.module').then(m => m.SharedModule),
-    }),
     RouterModule,
     TranslateModule,
     WishlistsExportsModule,
@@ -68,14 +62,12 @@ const exportedComponents = [
     HeaderNavigationComponent,
     HeaderSimpleComponent,
     LanguageSwitchComponent,
-    LazyLoginModalComponent,
     LoginStatusComponent,
     MiniBasketComponent,
     ProductCompareStatusComponent,
     SubCategoryNavigationComponent,
     UserInformationMobileComponent,
   ],
   exports: [...exportedComponents],
-  entryComponents: [LazyLoginModalComponent],
 })
 export class ShellModule {}