Solvednativescript angular Lazy loaded module route redirectTo ignored or not working

I don't know if this is an Angular or Nativescript issue but this is not working with the latest Nativescript-angular projects, when we load a lazy module and in its routes there is an empty path that redirest to another path the redirectTo option is ignored, no matter if the path is wrong there is not error log and the view is not loaded, here i have a playground for showing the issue

If you go to home-module.routing.ts file you can see the configuration.

19 Answers

✔️Accepted Answer

@darkyelox I was able to resolve your case with the usage of children routing property as shown here.

For your convenience, here is the modified Playground demo. The things that have changed are the lazily loaded routing table

home-routing.module.ts

// home-routing.module.ts
const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                redirectTo: 'home',
                pathMatch: 'full'
            },
            {
                path: 'home',
                component: HomeComponent
            }
        ]
    }
]

I've also changed the app-routing.module.ts file (mainly for readability to avoid multiple home paths but also to remove the / infront of the main path)

// app-routing.module.ts
const routes: Routes = [
    { path: "", redirectTo: "main", pathMatch: "full" },
    { path: "main", loadChildren: "./home/home.module#HomeModule" }
];

Other Answers:

Works fine on Angular 9.1.7:

// parent 'main' module
const routes: Route = [
...
{
                path: 'cool',
                loadChildren: () => import('@libs/cool-feature').then((m) => m.CoolFeatureModule),
}
...

// inside cool-feature-routing.module
const coolRoutes: Routes = [{
    path: '',
    component: CoolLayoutComponent,
    children: [
        {
            path: '',
            redirectTo: 'first',
            pathMatch: 'full'
        },{
            path: 'first',
            component: CoolFirstComponent
       }
... //some other internal paths
]
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(coolRoutes)]
})
export class CoolFeatureRoutingModule {
}

// and insdide CoolFeatureModule 
@NgModule({
    declarations: [
        CoolFirstComponent,
        CoolSecondComponent
    ],
    exports: [],
    imports: [
        CoolFeatureRoutingModule,  <-- issue was when this module was listed as a last item inside imports array
        CommonModule,
        FormsModule,
        CoreModule
    ]
})
export class CoolFeatureModule {}

So again if CoolFeatureRoutingModule goes as a last element of NgModule imports array - redirection fails without any error in console. If CoolFeatureRoutingModule goes as a first element of NgModule imports array - everything works fine.

Remember that i'm talking about lazy loaded modules and the redirect not works no matters what i do, simply is ignored:

image

You can test it in the playground link in my first comment, i update it with your workaround and that not work, this issue must not be closed

I was facing issues with lazy loading modules as I've been generating modules with VSCode and it was registering the modules and importing them in the root module. On removing the import in root module all went fine.

Confirming that using redirectTo from lazily loaded module does not seem to work as expected.

More Issues: