Unable to router.navigate to lazy loaded child modules

Question

I'm new to angular. I am starting with the latest version, 8.

I am trying to write an app. The initial state of the route is path:'' and I would like to determine the next route based on some condition in the base path here. If the condition is true, I need to redirect the user to /home and if it fails, I need to redirect to /welcome. Both home and welcome are lazily loaded.

I have a guard service where the routing decision is made (which path to take).

app-routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { HomeGuardService } from './services/route-guard/home-guard.service';


const routes: Routes = 
[ 
    { 
        path: '', pathMatch: 'full', 
        canActivate: [HomeGuardService], 
        children: 
        [ 
            { path: 'welcome', loadChildren: () => import('./welcome/welcome.module').then(mod => mod.WelcomeModule), }, 
            { path: 'home', loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule) } 
        ] 
    } 
]; 

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

home-guard.service.ts

import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router/src/router_state'; 
import { LocalStorageService } from '../storage/local-storage.service'; 

@Injectable({ providedIn: 'root' }) 
export class HomeGuardService implements CanActivate { 

    constructor( private router: Router) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.checkCountrySelection(state); } 


    private checkCountrySelection(state: RouterStateSnapshot): boolean { 
        if (<my_condition>) { 
            this.router.navigate(['home']); 
            return true; 
        } 
        this.router.navigateByUrl('welcome'); 
        return false; 
    } 
}

Now, with this setup, angular complains that it cannot match any routes for URL Segment: 'welcome'

(Initially, I have made the condition to fail in home-guard service to it would load the welcome module)

Welcome and Home should not be children of default path – Vinod Bhavnani Jun 04 '19 at 07:33 — Vinod Bhavnani, Jun 04 '19 at 07:33

score 2 · Answer 1 · answered Jun 04 '19 at 07:33

2

Your routes are children of a guarded group.

In case it doesn't speak to you : if you can't access the group because of the guard, you won't be able to access the children because of the guard.

The guard is ran for every route depth, and if one fails and redirects, the following routes won't be reached.

You have to take your routes out of the guarded route to make it work.

answered Jun 04 '19 at 07:33

Thanks ! I actually can understand this. Infact, i followed couple of things like these -> https://stackoverflow.com/questions/49405281/angular-5-conditional-module-lazy-loading – Super Test Jun 04 '19 at 09:45

score 1 · Accepted Answer · answered Jun 04 '19 at 08:09

1

You can't define children to the default path, you can change your routes array to :

const routes: Routes = 
[ 
  { 
    path: 'welcome',
    canActivate: [HomeGuardService],
    loadChildren: () => import('./welcome/welcome.module').then(mod => mod.WelcomeModule)
  },
  { 
    path: 'home',
    canActivate: [HomeGuardService],
    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
  }
  ...

answered Jun 04 '19 at 08:09

ilyas shabi

194
1
7

1

I actually do not want to load any component or module for the default path. I want it to load either home or welcome. If i would not make them children, the default path would require me to add a component or module . It says - One of the following must be provided: component, redirectTo, children or loadChildren – Super Test Jun 04 '19 at 08:59
1

I have modified the route to load home to root path and redirect to welcome when condition fails(in the guard) – Super Test Jun 07 '19 at 09:47

Unable to router.navigate to lazy loaded child modules

2 Answers2