CODEWITHSUNDEEP
angularangular-routingangular-module
Heena
Heena

Reputation: 1773

Unable to Implement routing in submodules created within the app module

I am trying to implement routing in sub-modules apart from the routing module created in the app module.

I have created three sub-modules in the app module namely login, home and admin modules and I have created a main routing module in the app folder to navigate between login, home and admin sub-modules

I have also created three components in the home module namely HomeComponent, CreateAlertsComponent and UpdateAlertsComponent and routing module with name routeHome.module.ts to navigate between home components.

I am able to route between the sub-modules using routing-module.ts but I am unable to route between the components created in the home module.

I am getting the error as shown below

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'Home/home/Alerts/create-alerts'
Error: Cannot match any routes. URL Segment: 'Home/home/Alerts/create-alerts'
    at ApplyRedirects.noMatchError (router.js:1765)
    at CatchSubscriber.eval [as selector] (router.js:1730)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at LastSubscriber.Subscriber._error (Subscriber.js:134)
    at ApplyRedirects.noMatchError (router.js:1765)
    at CatchSubscriber.eval [as selector] (router.js:1730)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at LastSubscriber.Subscriber._error (Subscriber.js:134)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Below shown is my directory structure with the sub-modules admin, home, login created.

enter image description here

Below shown is my directory structure with the components and routeHome.module.ts in home sub-module

enter image description here

Please access my code here on stackblitz

Can any body please help resolve this routing conflicts...?

Upvotes: 1

Views: 134

Answers (2)

Abdul Rafay
Abdul Rafay

Reputation: 3391

Since you have splitted your app into modules. I would suggest you to use Angular lazy loading feature Modules. The feature module in your case HomeModule, have to be wired up to the RoutingModule so the router knows about it.

Updated your code HERE.

In RoutingModule, update the routes array with the following:

const routes: Routes = [
  { path:'Login/login', component: LoginComponent },
  { path:'Home', loadChildren: "./home/home.module#HomeModule" },
  { path:'Admin/admin', component: AdminComponent },
];

Notice that the lazy loading syntax uses loadChildren followed by a string that is the path to the module, a hash mark or #, and the module’s class name.

Configure the HomeModule routes by updating RouteHomeModule as:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CreateAlertsComponent } from './Alerts/create-alerts/create-alerts.component';
import { UpdateAlertsComponent } from './Alerts/update-alerts/update-alerts.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'Alerts/create-alerts', component: CreateAlertsComponent },
  { path: 'Alerts/update-alerts', component: UpdateAlertsComponent },
];

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

export class RouteHomeModule { }

Notice that Lazy loaded modules should use RouterModule.forChild() instead of RouterModule.forRoot().

Finally remove HomeComponent, CreateAlertsComponent and UpdateAlertsComponent from AppModule declarations as these components are part of HomeModule and update routerLink in app.component.html. In AppModule:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AdminComponent,
  ],
  ...

app.component.html:

<button mat-raised-button
  routerLink='Home' 
  routerLinkActive="active">
  Home
</button>

Upvotes: 2

Titch
Titch

Reputation: 81

You can use child routes to navigate through your application :

{
  path:'Home/home',
  component: HomeComponent,
  children: [
    {
      path: 'Alerts/create-alerts',
      component: CreateAlertsComponent,
    },
  ],
},

You can also have a look at https://angular.io/guide/router#child-routing-component to see more examples.

edit : also add <router-outlet></router-outlet> to your home.component.html file to render your child component.

Upvotes: 3

Related Questions