Angular LazyLoading with multiple component doesn't work

Question

I am new in Angular. I am trying to implement lazy loading with multiple component. Its lazy load home component properly but it fails to load another components.

It throws below error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin'

app.routing.ts

{
   path: '',
   component: SiteLayoutComponent,
   children: 
   [
      {
        path: 'home',
        loadChildren: './lazymodules/lazy.module#LazyModule',
      },
   ]},

lazy-routing.module.ts

const routes: Routes = [
  {
    path: '', component: HomeComponent,
  }
   ,
   {
     path: 'admin', component: AdminComponent,
   },
  { path: 'settings', component: SettingsComponent },
  { path: 'about', component: AboutComponent }];

I have created similar sample application on stackblitz. Anybody please hep here.

Thanks in advance

Pardeep Jain · Accepted Answer · 2018-11-27 13:38:06Z

1

Replace your navigation code (In site header file) with -

this.router.navigateByUrl('/home/admin');

or

this.router.navigate(['home/admin']);

answered Nov 27, 2018 at 13:38

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

3 Comments

Dadasaheb Karande Over a year ago

Hi Pradeep Sir, Thanks for the answers. It works. But in this code my url has been changed from localhost:61801/admin to localhost:61801/home/admin. Can we achieve this with the same url like 'localhost:61801/admin' or 'localhost:61801/about'?

Pardeep Jain Over a year ago

Offcourse but for that you need to change routing configurtion.

Dadasaheb Karande Over a year ago

Could you please share the possible routing configuration for the same. It will help me a lot. Thanks

Niral Munjariya · Accepted Answer · 2018-11-27 13:55:27Z

Check the below changes I made in the site-header.component.ts

NavigateToRoute(pageURL: string) {
    //alert(pageURL);
    if (pageURL == "home") {
      console.log(pageURL);
      this.router.navigate(['home']),
      this.MenuActive = "home";
    }
    else if (pageURL == "admin") {
      console.log(pageURL);
      this.router.navigate(['admin'], {relativeTo: this.route}); // <- this was missing
      this.MenuActive = "admin";
    }
    else if (pageURL == "settings") {
      console.log(pageURL);
      this.router.navigate(['settings'], {relativeTo: this.route});
      this.MenuActive = "settings";
    }
    else if (pageURL == "about") {
      console.log(pageURL);
      this.router.navigate(['about'], {relativeTo: this.route});
      this.MenuActive = "about";
    }
    else if (pageURL == "login") {
      console.log(pageURL);
      this.router.navigate(['login'], {relativeTo: this.route});
    }
  }

Have a look at the updated example here

Collectives™ on Stack Overflow

Angular LazyLoading with multiple component doesn't work

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related