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
– Rituraj ratan, Commented Feb 20, 2018 at 6:36

DeborahK · Accepted Answer · 2018-02-20 08:11:33Z

4

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.

answered Feb 20, 2018 at 8:11

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rituraj ratan Over a year ago

Have you tried to run this code bse i have setup same thing and its not working :(

DeborahK Over a year ago

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.

ImFarhad Over a year ago

@DeborahK can you please have a look at my question: stackoverflow.com/questions/57357145/…. I'm having same issue with multiple lazy-loading modules.

sanjay kumar · Accepted Answer · 2018-02-20 06:43:13Z

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, 2018 at 6:43

sanjay kumar

8587 silver badges10 bronze badges

2 Comments

Rituraj ratan Over a year ago

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

sanjay kumar Over a year ago

@Riturajratan plz try: const appRoutes: Routes = [ { path: '', redirectTo: 'A/B', pathMatch: 'full' },

moritzg · Accepted Answer · 2019-01-17 08:55:57Z

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, 2019 at 8:55

moritzg

4,4145 gold badges41 silver badges63 bronze badges

answered Feb 20, 2018 at 6:19

sharmila k

13 bronze badges

2 Comments

Rituraj ratan Over a year ago

But when i enter A it will redirect to A/B but i want by default it will goes to A/B

sharmila k Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related