CODEWITHSUNDEEP
angularangular-router
b_it_s
b_it_s

Reputation: 724

angular : wildcard route loaded instead of route in eagerly loaded modules

I have an app with 2 feature modules: 1 is lazy loaded and 1 is eagerly loaded.

In my app routing, I want to add a "**" wildcard route for the "page not found" scenario.

const routes: Routes = [
  { path: '', loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

This was working fine with the lazy loaded module.

Now I've added the eagerly loaded module with it's own routing module. So my "app routing" above remains the same. I just import the eagerly loaded module in my app module. This is the routing config of my eagerly loaded module:

const routes: Routes = [
  { 
    path:"people", 
    children: [
      { path: "invite", component: InviteComponent}
    ]}
];

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

My problem is

So how can I add a "page not found" scenario?

Upvotes: 0

Views: 740

Answers (2)

b_it_s
b_it_s

Reputation: 724

I found a solution which is much better than my previous one...

In app.module, make sure you put the routing module behind the eagerly loaded module!

 imports: [
    BrowserModule,
    SharedModule,
    PeopleModule, /* Eagerly loaded module with routing*/
    UsersModule,
    BrowserAnimationsModule,
    AppRoutingModule /* Make sure the app routing module is imported after the eagerly loaded module!! */
 ]

Upvotes: 2

b_it_s
b_it_s

Reputation: 724

I might have found a solution, but I doubt this is the best possible solution...

When I add a wildcard route which redirects to the root route in my eagerly loaded feature module, then everything seems to work...

const routes: Routes = [
  { 
    path:"people", 
    children: [
      { path: "invite", component: InviteComponent}
    ]
  },
  { path:"**", redirectTo: '/', pathMatch:"full"}
];

The problem with this solution is that I need to add a wildcard route in every module... Doesn't seem like the best solution...

Upvotes: 0

Related Questions