CODEWITHSUNDEEP
angularroutesangular2-routing
Peekyou
Peekyou

Reputation: 471

Angular router always redirecting to the same module

This is driving me crazy. I have 3 simple routes in my app module:

routes: Routes = [
    { path: '', redirectTo: '/customers', pathMatch: 'full' },
    { path: 'customers', loadChildren: './components/customer#CustomerModule' },
    { path: 'promotions', loadChildren: './components/promotion#PromotionModule'}
];

In my customer module I have defined theses routes:

routes: Routes = [
    {
        path: '', component: CustomerComponent, children: [
            { path: '', component: CustomerSearchComponent },
            { path: ':id', component: CustomerDetailComponent }
    ]}
];

And in my promotion modules:

routes: Routes = [
    { path: '', component: PromotionComponent },
    { path: 'new', component: PromotionNewComponent }
];

I have a <router-outlet></router-outlet> in my AppComponent and CustomerComponent. The thing is, when I am going to the route /promotions, I am still getting redirected to the CustomerModule -> CustomerComponent -> CustomerSearch

Why is this happening? I can't figure it out

EDIT: For navigation I have a header Component which contains:

<ul class="nav navbar-nav">
            <li>
                <a [routerLink]="['./customers']"
                   routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                    Customers
                </a>
            </li>
            <li>
                <a [routerLink]="['./promotions']"
                   routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                    Promotions
                </a>
            </li>
        </ul>

The app component is like this:

<app-header></app-header>

<main class="container">
  <router-outlet></router-outlet>
</main>

Upvotes: 0

Views: 1100

Answers (1)

bgraham
bgraham

Reputation: 1997

I think you need to specify your full routes, even in the feature module routing.

Whats happening is it's going into your Customer routing and finding the path '' + '' and landing on the CustomerSearchComponent.

Try changing the base path for the customer routing to be 'customer' instead of '' and changing the paths in your Promotion routing to 'promotion' and 'promotion/new'

Upvotes: 1

Related Questions