CODEWITHSUNDEEP
angularangular-router
ark
ark

Reputation: 3805

unable to load the routes when it split into different modules

I added a landing component that shows a landing page and a button which redirects to /recipes when it is clicked. It worked correctly when all the routes are in single module. but when it split into different routing modules its not redirecting to /recipes when it is clicked.

Here is my code appRouting.module.ts

It is redirecting to recipes only when i specify {path:'recipes' component:....} in appRotuing.module instead of recipesRouting.module

import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {ShoppingListComponent} from "../shopping-list/shopping-list.component";
import {DeactivateGuardService} from "../shared/deactivateGuard.service";
import {ShoppingListEditComponent} from "../shopping-list/shopping-list-edit/shopping-list-edit.component";
import {SignupComponent} from "../auth/signup/signup.component";
import {SigninComponent} from "../auth/signin/signin.component";
import {LandingComponent} from "../landing/landing/landing.component";
import {RecipesComponent} from "../recipes/recipes.component";


const appRoutes:Routes=[

  {path:'shoppingList',component:ShoppingListComponent,children:[
    {path:'',component:ShoppingListEditComponent,canDeactivate:[DeactivateGuardService]}
  ]},
  {path:'signup',component:SignupComponent},
  {path:'signin',component:SigninComponent},
  {path:'**',component:LandingComponent}

]
@NgModule({
  imports:[
    RouterModule.forRoot(appRoutes),

  ],
  exports:[RouterModule],
})
export class AppRoutingModule{
}

RecipesRouting.module.ts

import {RouterModule, Routes} from "@angular/router";
import {RecipesComponent} from "./recipes.component";
import {ActivateGuardService} from "../shared/activateGuard.service";
import {RecipeDetailComponent} from "./recipe-detail/recipe-detail.component";
import {RecipeStartComponent} from "./recipe-start/recipe-start.component";
import {RecipeEditComponent} from "./recipe-edit/recipe-edit.component";
import {DeactivateGuardService} from "../shared/deactivateGuard.service";
import {NgModule} from "@angular/core";
import {LandingComponent} from "../landing/landing/landing.component";


const recipeRoutes:Routes=[
  {path:'',component:LandingComponent,pathMatch:'full'},
  {path:'recipes',component:RecipesComponent,children:[
    {path:'',component:RecipeStartComponent},
    {path:'new',canActivate:[ActivateGuardService],component:RecipeEditComponent},
    {path:':id',component:RecipeDetailComponent},
    {path:':id/edit',canActivate:[ActivateGuardService],component:RecipeEditComponent,canDeactivate:[DeactivateGuardService]}
  ]},
]

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

export class RecipesRoutingModule{}

Is there any way to solve this issue? Where should i place the landing component route so that i should open recipes component whenever button is clicked

Thanks in Advance

Upvotes: 0

Views: 81

Answers (1)

ark
ark

Reputation: 3805

I found out the problem. It is because of {path:'**',component:LandingComponent} in appRouting.Module.ts since no /recipes route is specified in appRoutingmodule it assumes that is not a valid route and redirect to the component that i specified when wild routes are encountered.

Upvotes: 1

Related Questions