Angular + Ionic = dziwne zachowanie Router-a

[Konrad-GM]

Cześć, ktoś się może zajmuje tutaj Angular-em? Bo prosiłbym o pomoc kogoś, kto miał jakieś doświadczenie z Router-em.

 

Otóż Angular dziwnie się zachowuje, jak buduje routing aplikacji, chodzi dokładniej o child Routers w modułach. Podzieliłem podstrony aplikacji na moduły, które importują routing poprzez RouterModule.forChild i przekierowanie z modułu sessions.module na list.page działa, ale gdy przekierowuję na view.page z modułu sessions.module, to kompletnie się psuje routing i przekierowuje mnie znowu na list.page z dość dziwnym linkiem. Struktura aplikacji wygląda tak:

src\app
       |- app-routing-module
       |- \home
               |- home.page
       |- \intro
               |- intro.page
       |- \sessions
               |- sessions.module
               |- \list
                       |- list.page
               |- \view
                       |- view.page
       |- \shared
               |- shared.module

 

Kod głównego modułu app-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'intro',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'intro',
    loadChildren: './intro/intro.module#IntroPageModule'
  },
  {
    path: 'sessions',
    loadChildren: './sessions/sessions.module#SessionsModule'
  }
];

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

 

Kod modułu session.module wygląda tak:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'list',
    pathMatch: 'full'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  },
  {
    path: 'view',
    loadChildren: './view/view.module#ViewPageModule'
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ]
})
export class SessionsModule {}

 

Przekierowuję na stronę view.page dyrektywą:

[routerLink]="['/sessions', 'view']"

 

Link przed przekierowaniem wygląda tak:

http://localhost:8100/sessions/list

 

Po kliknięciu na link, przekierowuje mnie do tej samej strony list.page, ale link wygląda już tak:

http://localhost:8100/sessions/view/list

 

Zauważyłem, że jak usunę kod odpowiedzialny za przekierowanie w module sessions.module:

const routes: Routes = [
//  {
//    path: '',
//    redirectTo: 'list',
//    pathMatch: 'full'
//  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  },
  {
    path: 'view',
    loadChildren: './view/view.module#ViewPageModule'
  }
];

 

To wtedy działa jak powinno, ale nie przekierowuje mnie na list.page jak przejdę na link /sessions (trzeba przekierowywać bezpośrednio na /sessions/list)

 

Może ktoś ma jakiś pomysł, dlaczego w taki właśnie sposób zachowuje się Angular?

[Konrad-GM]

Dobra, rozwiązałem swój problem, ale głupotę zrobiłem, aż mi wstyd xD

 

No ale może ktoś taki sam problem będzie miał, to dla potomnych podaję rozwiązanie: Otóż na stronie view.page, uwaga, importuję moduł rodzica session.module i dlatego router ponownie przekierowywał na list.page bo jest zdefiniowany w session.module i tak w kółko. Chciałem wcześniej importować komponenty rodzica, ale wyczytałem wcześniej już, że do tego potrzebny jest shared.module, tylko zapomniałem usunąć z view.page importu modułu session.module, kek.