Nativescript-angular: Lazy loaded module route redirectTo ignored or not working

[darkyelox]

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.

[jolafrite]

one question

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" }, <--- why do you need this ?
    { path: "home", component: HomeComponent }
];

can't you just do

const routes: Routes = [
    { path: "", component: HomeComponent }
];

?

[NickIliev]

@darkyelox the default route in the lazily loaded component can be directly registered with:

{ path: "", component: HomeComponent } 

As done and shown here.

[darkyelox]

Sure but this is a problem because if i want to redirect to something more complex like a child route, like you suggest i must reorder my structure every time i want to go to another view, this problem was not present in version 3.x of narivescript but in 4.x it is

[NickIliev]

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

[darkyelox]

I need redirectTo because i will have a module with all my navigation and i want to redirect from the empty route to every component using its path, i will have also an internal outlet so i will have a route with childs and i want to redirect using the path with outlet

[pbourdu]

+1

[NickIliev]

@darkyelox the issue is not a bug as it appears that we should use the path without a slash
For example:

const routes: Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },  // notice the redirectTo: "home" (lacks a slash)
    { path: "home", component: HomeComponent }
];

[darkyelox]

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

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

[NickIliev]

@darkyelox I am investigating the issue at this very moment and will post any related information here. I am using redirectTo in a lazily loaded module here and it works as expected n my side but still not working in your playground example.

Reopening the issue until further information is available,

[NickIliev]

@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" }
];

[ishan123456789]

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.

[ashikjs]

It work for my Angular 7...

{ path: '', redirectTo: '/dashboard', pathMatch: 'full', },

[prajilshresthaiw]

I was having this issues and after a day wasting searching for answers I figured out that I was adding
a slash / in the app-routing file during redirection
{ path: '', redirectTo: '/dashboard', pathMatch: 'full', },make sure you don't have a / in redirectTo like
{ path: '', redirectTo: 'dashboard', pathMatch: 'full', },

[codergauravsharma]

I was having this issues and after a day wasting searching for answers I figured out that I was adding
a slash / in the app-routing file during redirection
{ path: '', redirectTo: '/dashboard', pathMatch: 'full', },make sure you don't have a / in redirectTo like
{ path: '', redirectTo: 'dashboard', pathMatch: 'full', },

this worked for me as well ! thanks !

[codergauravsharma]

@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" }
];

thanks for this ! this worked for me as well !

[kuttikrishnankodoth]

I am using angular 9
no solution is working for me than

const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: MainComponent,
children: [
{
path: '',
loadChildren: () => import('./gateways/gateways.module').then(m => m.GatewaysModule),
pathMatch: 'full'
},
{
path: 'auth',
loadChildren: () => import('./authentication/authentication.module').then(m => m.AuthenticationModule),
},
{
path: 'areas',
loadChildren: () => import('./areas/areas.module').then(m => m.AreasModule)
},

[LeonVay]

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.