lazy load module inside main component in Angular 10

Question

I got two modules in my application one is the app.module and another one is user.module which gets lazy-loaded. On the app.module I got a sign-in component, sign-up component and main component. The main.component is the component consisting of a navbar and a sidebar. I want every component inside user.module to load inside the main.component. But I'm getting error in console Error: Cannot match any routes. URL Segment: 'user/home'.

app.routing

import { MainComponent } from './main/main.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';

const routes: Routes = [

      { path: 'sign-in', component: SignInComponent, pathMatch: 'full' },
      { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
      { path: 'sign-up', component: SignUpComponent }
      {
        path: '',
        component: MainComponent,
        children: [
          {
            path: 'user',
            loadChildren: () => import('./user/user.module').then(m => m.UserModule)
          },
    
        ]
    
      },
      /* { path: '500', component: Error500Component },
      { path: '**', component: Error404Component }, */
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

user.routing

import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { FriendsComponent } from './friends/friends.component';

    const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'friends', component: FriendsComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

You will need to share the error, and the full user-routing.ts code — Shahar Shokrani
– Shahar Shokrani, Commented Oct 4, 2020 at 11:23
updated..check now. In case you want anything more, let me know and I will create a stackblitz snippet — surjendu_dey
– surjendu_dey, Commented Oct 4, 2020 at 11:41
See my answer, your code looks ok so I can only assume you are missing the import of UserRoutingModule inside UserModule — Shahar Shokrani
– Shahar Shokrani, Commented Oct 4, 2020 at 12:13

Shahar Shokrani · Accepted Answer · 2020-10-04 12:38:47Z

0

You should import and export the UserRoutingModule in UserModule.

@NgModule({
  declarations: [..],
  imports: [UserRoutingModule],
  exports: [UserRoutingModule],
  providers: [..]
})
export class UserModule {}

edited Oct 4, 2020 at 12:38

answered Oct 4, 2020 at 12:11

Shahar Shokrani

8,93010 gold badges60 silver badges106 bronze badges

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

Comments

Tony · Accepted Answer · 2020-10-05 06:13:22Z

0

everything looks ok, have you specified router-outlet in your main.component.html ?

<router-outlet></router-outlet>

answered Oct 5, 2020 at 6:13

Tony

9105 silver badges19 bronze badges

Collectives™ on Stack Overflow

lazy load module inside main component in Angular 10

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related