How to load child route by default with lazy loadi

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.

Answer 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 { }

Answer 2

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.

Answer 3

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?