How to load child route by default with lazy loading in angular 2?

Question

I know this question asked many time i have search many SO question but unable to find answer so just posting my question my structure is like below.

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                loadChildren: './b/b.module#BModule'
            }]
    }
]

now on app load i want to load path A/B

How will i do it ? I have done above thing and its not working. Any help is appreciated.

@SurenSrapyan yes i have added when i directly put url things works — Rituraj ratan, Feb 20 '18 at 06:36

score 4 · Answer 1 · answered Feb 20 '18 at 08:11

I wonder if something else is wrong somewhere else. I just modified my code to (basically) match what you have and it worked fine (see below). I have movies, so that would be your "B".

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        children: [
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'movies',
                loadChildren: './movies/movie.module#MovieModule'
            },
            { path: '', redirectTo: 'movies', pathMatch: 'full' }
        ]
    },
    { path: '**', component: PageNotFoundComponent }
];

Navigating to http://localhost:4200 resulting in a URL of: http://localhost:4200/A/movies

You can find my code here: https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

I just modified my app-routing.module.ts as shown above and ran it.

Have you tried to run this code bse i have setup same thing and its not working :( — Rituraj ratan, Mar 21 '18 at 07:11
Did you try to run the code from my github? It all works. I just used it in a talk I gave at a conference last week and it worked with no problem. — DeborahK, Mar 21 '18 at 17:20
@DeborahK can you please have a look at my question: https://stackoverflow.com/questions/57357145/redirectto-lazy-module-based-on-user-role. I'm having same issue with multiple lazy-loading modules. — ImFarhad, Aug 06 '19 at 17:18

score 1 · Answer 2 · answered Feb 20 '18 at 06:43

1

Please check B module it's also required component and routing concept.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AdminComponent } from "../components/admin/admin.component";

export const routes: Routes = [
  {
    path: '', component: AdminComponent 

  }
];

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule, 
     RouterModule.forChild(routes)
  ],
  bootstrap: [AdminComponent]
})
export class BModule { }

answered Feb 20 '18 at 06:43

sanjay kumar

838
6
10

its already done But when i enter A it will redirect to A/B but i want by default it will goes to A/B – Rituraj ratan Feb 20 '18 at 07:06
@Riturajratan plz try: const appRoutes: Routes = [ { path: '', redirectTo: 'A/B', pathMatch: 'full' }, – sanjay kumar Feb 20 '18 at 07:12

score 0 · Answer 3 · edited Jan 17 '19 at 08:55

0

Lazy loading should be used when you want to delay the loading of one or more modules until the user requests those modules. Looks like your scenario needs the B module by default. You could directly invoke the component:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                component: 'BComponent'
            }]
    }
]

If it still has to be a lazy module, did you try enableTracing? Is the route getting recognized?

edited Jan 17 '19 at 08:55

moritzg

4,266
3
37
62

answered Feb 20 '18 at 06:19

sharmila k

1
3

But when i enter A it will redirect to A/B but i want by default it will goes to A/B – Rituraj ratan Feb 20 '18 at 06:37
const appRoutes: Routes = [ { path: '', redirectTo: 'A', pathMatch: 'full' }, {path: 'A/B', resolve: { DATA: ADataResolver, }, component: 'BComponent'}] – sharmila k Feb 20 '18 at 06:48

How to load child route by default with lazy loading in angular 2?

3 Answers3

Linked