bug fixed

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule, UrlSegment } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 
 import { DefaultLayoutComponent } from '@app/layouts/components/default.layout.component';
 import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.component';
@@ -7,21 +7,12 @@ import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.co
 import { AppAuthenticationGuard } from '@app/guards/app-authentication.guard';
 import { AppSessionResolver } from './resolvers/app-session.resolver';
 
-export function appMatcher(url: UrlSegment[]) {
-  if (1 === url.length) {
-    if (
-      ['organization', 'group', 'chat', 'message'].some((p) =>
-        url[0].path.startsWith(p)
-      )
-    ) {
-      return { consumed: url };
-    }
-  }
-  return null;
-}
-
 const routes: Routes = [
-  { path: '', redirectTo: '/organization', pathMatch: 'full' },
+  {
+    path: '',
+    redirectTo: '/organization/(content:index)',
+    pathMatch: 'full'
+  },
   {
     path: 'account',
     component: NoNaviLayoutComponent,
@@ -39,59 +30,51 @@ const routes: Routes = [
       )
   },
   {
-    matcher: appMatcher,
+    path: '',
     component: DefaultLayoutComponent,
     canActivate: [AppAuthenticationGuard],
     resolve: {
-      session: AppSessionResolver
+      authentication: AppSessionResolver
-    }
+    },
+    children: [
+      { path: '', redirectTo: '/organization', pathMatch: 'full' },
+      {
+        path: 'organization',
+        loadChildren: () =>
+          import('./pages/organization/organization.page.module').then(
+            (m) => m.AppOrganizationPageModule
+          )
+      },
+      {
+        path: 'group',
+        loadChildren: () =>
+          import('./pages/group/group.page.module').then(
+            (m) => m.AppGroupPageModule
+          )
+      },
+      {
+        path: 'chat',
+        loadChildren: () =>
+          import('./pages/chat/chat.page.module').then(
+            (m) => m.AppChatPageModule
+          )
+      },
+      {
+        path: 'call',
+        loadChildren: () =>
+          import('./pages/call/call.page.module').then(
+            (m) => m.AppCallPageModule
+          )
+      },
+      {
+        path: 'message',
+        loadChildren: () =>
+          import('./pages/message/message.page.module').then(
+            (m) => m.AppMessagePageModule
+          )
+      }
+    ]
   },
-  // {
-  //   path: '',
-  //   component: DefaultLayoutComponent,
-  //   canActivate: [AppAuthenticationGuard],
-  // resolve: {
-  //   authentication: AppAuthenticationResolver
-  // },
-  //   children: [
-  //     { path: '', redirectTo: '/organization', pathMatch: 'full' },
-  //     {
-  //       path: 'organization',
-  //       loadChildren: () =>
-  //         import('./pages/organization/organization.page.module').then(
-  //           (m) => m.AppOrganizationPageModule
-  //         )
-  //     },
-  //     {
-  //       path: 'group',
-  //       loadChildren: () =>
-  //         import('./pages/group/group.page.module').then(
-  //           (m) => m.AppGroupPageModule
-  //         )
-  //     },
-  //     {
-  //       path: 'chat',
-  //       loadChildren: () =>
-  //         import('./pages/chat/chat.page.module').then(
-  //           (m) => m.AppChatPageModule
-  //         )
-  //     },
-  //     {
-  //       path: 'call',
-  //       loadChildren: () =>
-  //         import('./pages/call/call.page.module').then(
-  //           (m) => m.AppCallPageModule
-  //         )
-  //     },
-  //     {
-  //       path: 'message',
-  //       loadChildren: () =>
-  //         import('./pages/message/message.page.module').then(
-  //           (m) => m.AppMessagePageModule
-  //         )
-  //     }
-  //   ]
-  // },
   {
     path: '**',
     redirectTo: '/common/e404'

src/app/layouts/components/default.layout.component.html

@@ -97,17 +97,10 @@
   <div class="content-container" fxFlexFill>
     <mat-sidenav-container autosize="true" fxFlexFill>
       <mat-sidenav #leftSidenav class="left-sidenav" mode="side" opened="true">
-        <ng-container
+        <router-outlet></router-outlet>
-          fxFlexFill
-          *ngComponentOutlet="sidenavComponent; injector: sidenavInjector"
-        >
-        </ng-container>
       </mat-sidenav>
       <div fxFlex="1 1 auto">
-        <ng-container
+        <router-outlet name="content"></router-outlet>
-          *ngComponentOutlet="contentComponent; injector: contentInjector"
-        >
-        </ng-container>
       </div>
     </mat-sidenav-container>
   </div>

src/app/layouts/components/default.layout.component.ts

@@ -1,26 +1,18 @@
 import { Subscription } from 'rxjs';
 
-import {
+import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
-  Component,
+import { Router } from '@angular/router';
-  ViewChild,
+
-  OnDestroy,
+import { Store, select } from '@ngrx/store';
-  OnInit,
-  Type,
-  Injector
-} from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
 
 import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
 import { MatSidenav } from '@angular/material/sidenav';
 
-import { Store, select } from '@ngrx/store';
-
 import { LogService } from '@ucap/ng-logger';
 
 import { AppSelector } from '@app/store/state';
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
 
-const NAVS = ['/group', '/chat', '/organization', '/message'];
+const NAVS = ['group', 'chat', 'organization', 'message'];
 
 @Component({
   selector: 'app-layouts-default',
@@ -34,26 +26,13 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   @ViewChild('leftSidenav', { static: true })
   leftSidenav: MatSidenav;
 
-  sidenavComponent: Type<any>;
-  sidenavInjector: Injector;
-  contentComponent: Type<any>;
-  contentInjector: Injector;
-
   private windowSizeSubscription: Subscription;
-  private routerEventSubscription: Subscription;
 
   constructor(
     private router: Router,
-    private injector: Injector,
     private store: Store<any>,
     private logService: LogService
-  ) {
+  ) {}
-    this.routerEventSubscription = this.router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        this.onRoute(event.url);
-      }
-    });
-  }
 
   ngOnInit(): void {
     this.windowSizeSubscription = this.store
@@ -69,64 +48,16 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
           }
         }
       });
-
-    this.onRoute(this.router.url);
   }
 
   ngOnDestroy(): void {
     if (!this.windowSizeSubscription) {
       this.windowSizeSubscription.unsubscribe();
     }
-    if (!!this.routerEventSubscription) {
-      this.routerEventSubscription.unsubscribe();
-    }
   }
 
   onSelectedTabChange(event: MatTabChangeEvent) {
-    this.router.navigate([NAVS[event.index]]);
+    this.router.navigate([{ outlets: { primary: NAVS[event.index] } }]);
-  }
-
-  onRoute(url: string) {
-    this.navTabGroup.selectedIndex = NAVS.findIndex((v) => url.startsWith(v));
-
-    this.sidenavInjector = Injector.create({
-      providers: [{ provide: UCAP_PATH_PARAM, useValue: 'sidenav' }],
-      parent: this.injector
-    });
-    this.contentInjector = Injector.create({
-      providers: [{ provide: UCAP_PATH_PARAM, useValue: 'content' }],
-      parent: this.injector
-    });
-
-    switch (url) {
-      case '/organization':
-        import('@app/pages/organization/organization.page.module').then((m) => {
-          this.sidenavComponent = m.SidenavPageComponent;
-          this.contentComponent = m.IndexPageComponent;
-        });
-        break;
-      case '/group':
-        import('@app/pages/group/group.page.module').then((m) => {
-          this.sidenavComponent = m.SidenavPageComponent;
-          this.contentComponent = m.IndexPageComponent;
-        });
-        break;
-      case '/chat':
-        import('@app/pages/chat/chat.page.module').then((m) => {
-          this.sidenavComponent = m.SidenavPageComponent;
-          this.contentComponent = m.IndexPageComponent;
-        });
-        break;
-      case '/message':
-        import('@app/pages/message/message.page.module').then((m) => {
-          this.sidenavComponent = m.SidenavPageComponent;
-          this.contentComponent = m.IndexPageComponent;
-        });
-        break;
-
-      default:
-        break;
-    }
   }
 
   onClickToggleLeftSidenav() {

src/app/pages/call/call-routing.page.module.ts

@@ -1,7 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { IndexPageComponent } from './components/index.page.component';
+import { SidenavPageComponent } from './components/sidenav.page.component';
+
+const routes: Routes = [
+  {
+    path: 'index',
+    outlet: 'content',
+    component: IndexPageComponent
+  },
+  {
+    path: '',
+    component: SidenavPageComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/pages/call/components/index.ts

@@ -1,3 +1,4 @@
 import { IndexPageComponent } from './index.page.component';
+import { SidenavPageComponent } from './sidenav.page.component';
 
-export const COMPONENTS = [IndexPageComponent];
+export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];

src/app/pages/call/components/sidenav.page.component.ts

@@ -3,18 +3,11 @@ import { Router } from '@angular/router';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-call-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
 export class SidenavPageComponent {
-  constructor(
+  constructor(private logService: LogService) {}
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
-    private logService: LogService
-  ) {
-    this.logService.info('app-pages-call-sidenav', 'pathParam', this.pathParam);
-  }
 }

src/app/pages/chat/chat-routing.page.module.ts

@@ -1,7 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { IndexPageComponent } from './components/index.page.component';
+import { SidenavPageComponent } from './components/sidenav.page.component';
+
+const routes: Routes = [
+  {
+    path: 'index',
+    outlet: 'content',
+    component: IndexPageComponent
+  },
+  {
+    path: '',
+    component: SidenavPageComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/pages/chat/components/index.ts

@@ -0,0 +1,4 @@
+import { IndexPageComponent } from './index.page.component';
+import { SidenavPageComponent } from './sidenav.page.component';
+
+export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];

src/app/pages/chat/components/sidenav.page.component.ts

@@ -3,18 +3,11 @@ import { Router } from '@angular/router';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-chat-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
 export class SidenavPageComponent {
-  constructor(
+  constructor(private logService: LogService) {}
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
-    private logService: LogService
-  ) {
-    this.logService.info('app-pages-chat-sidenav', 'pathParam', this.pathParam);
-  }
 }

src/app/pages/group/components/index.page.component.ts

@@ -2,18 +2,11 @@ import { Component, Inject } from '@angular/core';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-group-index',
   templateUrl: './index.page.component.html',
   styleUrls: ['./index.page.component.scss']
 })
 export class IndexPageComponent {
-  constructor(
+  constructor(private logService: LogService) {}
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
-    private logService: LogService
-  ) {
-    this.logService.info('app-pages-group-index', 'pathParam', this.pathParam);
-  }
 }

src/app/pages/group/components/index.ts

@@ -0,0 +1,4 @@
+import { IndexPageComponent } from './index.page.component';
+import { SidenavPageComponent } from './sidenav.page.component';
+
+export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];

src/app/pages/group/components/sidenav.page.component.ts

@@ -2,22 +2,11 @@ import { Component, Inject } from '@angular/core';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-group-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
 export class SidenavPageComponent {
-  constructor(
+  constructor(private logService: LogService) {}
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
-    private logService: LogService
-  ) {
-    this.logService.info(
-      'app-pages-group-sidenav',
-      'pathParam',
-      this.pathParam
-    );
-  }
 }

src/app/pages/group/group-routing.page.module.ts

@@ -1,7 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { IndexPageComponent } from './components/index.page.component';
+import { SidenavPageComponent } from './components/sidenav.page.component';
+
+const routes: Routes = [
+  {
+    path: 'index',
+    outlet: 'content',
+    component: IndexPageComponent
+  },
+  {
+    path: '',
+    component: SidenavPageComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/pages/message/components/index.ts

@@ -0,0 +1,4 @@
+import { IndexPageComponent } from './index.page.component';
+import { SidenavPageComponent } from './sidenav.page.component';
+
+export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];

src/app/pages/message/components/sidenav.page.component.ts

@@ -2,22 +2,11 @@ import { Component, Inject } from '@angular/core';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-group-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
 export class SidenavPageComponent {
-  constructor(
+  constructor(private logService: LogService) {}
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
-    private logService: LogService
-  ) {
-    this.logService.info(
-      'app-pages-group-sidenav',
-      'pathParam',
-      this.pathParam
-    );
-  }
 }

src/app/pages/message/message-routing.page.module.ts

@@ -2,11 +2,17 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IndexPageComponent } from './components/index.page.component';
+import { SidenavPageComponent } from './components/sidenav.page.component';
 
 const routes: Routes = [
   {
     path: 'index',
+    outlet: 'content',
     component: IndexPageComponent
+  },
+  {
+    path: '',
+    component: SidenavPageComponent
   }
 ];
 

src/app/pages/organization/components/index.ts

@@ -0,0 +1,4 @@
+import { IndexPageComponent } from './index.page.component';
+import { SidenavPageComponent } from './sidenav.page.component';
+
+export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];

src/app/pages/organization/components/sidenav.page.component.ts

@@ -1,23 +1,14 @@
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UCAP_PATH_PARAM } from '@app/types/tokens';
-
 @Component({
   selector: 'app-pages-ogranization-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
 export class SidenavPageComponent {
-  constructor(
+  constructor(private logService: LogService) {
-    @Inject(UCAP_PATH_PARAM) private pathParam: string,
+    this.logService.info('app-pages-ogranization-sidenav');
-    private logService: LogService
-  ) {
-    this.logService.info(
-      'app-pages-ogranization-sidenav',
-      'pathParam',
-      this.pathParam
-    );
   }
 }

src/app/pages/organization/organization-routing.page.module.ts

@@ -1,7 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { IndexPageComponent } from './components/index.page.component';
+import { SidenavPageComponent } from './components/sidenav.page.component';
+
+const routes: Routes = [
+  {
+    path: 'index',
+    outlet: 'content',
+    component: IndexPageComponent
+  },
+  {
+    path: '',
+    component: SidenavPageComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/pages/organization/organization.page.module.ts

@@ -5,12 +5,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { AppOrganizationRoutingPageModule } from './organization-routing.page.module';
 
-import { IndexPageComponent } from './components/index.page.component';
+import { COMPONENTS } from './components';
-import { SidenavPageComponent } from './components/sidenav.page.component';
-
-export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
-
-export { IndexPageComponent, SidenavPageComponent };
 
 @NgModule({
   imports: [CommonModule, FlexLayoutModule, AppOrganizationRoutingPageModule],

src/app/types/tokens.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
 
-export const UCAP_PATH_PARAM = new InjectionToken<string>(
+// export const UCAP_PATH_PARAM = new InjectionToken<string>(
-  '@ucap/app PATH_PARAM'
+//   '@ucap/app PATH_PARAM'
-);
+// );