New to the angular and I am following one of angular tutorials. Right now learning routes. But I am stuck at one place. So basically when i click on customer name i want to route to orders component and display that component, however when i hover over customer name i can see the route (eg :orders/3)created at the bottom of the browser but when i click on it, it is not showing orders component.

I have Customers component with customer list child component in it. I also have Orders component.

Code from order-routing.module.ts file where i am linking order component with the order/:id route.

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

import { OrderComponent } from './order.component';

const routes: Routes = [
    { path: 'orders/:id', component: OrderComponent }
];

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

}

Coe from customer-list.component.html file where i am binding routing with cust.name

<table >
    <thead>
        <tr>
            <th (click)="sort('name')">Name</th>
            <th (click)="sort('city')">City</th>
            <th (click)="sort('orderTotal')">Order Total</th>
        </tr>
    </thead>
    <tr *ngFor="let cust of filteredCustomers">
        <td>
            <a [routerLink]="['/orders', cust.id]">
                {{ cust.name | capitalize }}
            </a>
        </td>
        <td>{{ cust.city }}</td>
        <td>{{ cust.orderTotal | currency:currencyCode:'symbol'}}</td>
    </tr>
    <tr *ngIf="filteredCustomers && filteredCustomers.length">
        <td colspan="2">&nbsp;</td>
        <td>
            {{ customersOrderTotal | currency:currencyCode:'symbol'}}
        </td>
    </tr>
    <tr *ngIf="!filteredCustomers || !filteredCustomers.length">
        <td colspan="4">No customers found</td>
    </tr>
</table>

I have imported ordersModule and CustomerModule(which holds customer list child component) into app.module.ts module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from './core/core.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomerModule } from './Customer/customer/customer.module';
import { SharedModule } from './Shared/shared.module';
import { OrdersModule } from './Orders/order/order.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomerModule,
    OrdersModule,
    SharedModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Code from app-routing.module.ts

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

const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/customers'},
{ path: '**', pathMatch: 'full', redirectTo: '/customers' }
];


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

This is the screenshot showing route created when i hover over one of customer name

I have gone through the code lot of times now but i am not sure what i am doing wrong, i have also gone through the tutorial that i am following but couldn't understand what is missing to get orders component shown. I would really appreciate any help towards fixing this. Let me know if any code is needed here to understand more.

CodePudding user response：

Your current top-most AppRoutingModule has the following declaration of routes:

const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: '/customers'},
  { path: '**', pathMatch: 'full', redirectTo: '/customers' }
];

This is where the problem is. You need to include the orders before the second generic wildcard route ('**').

But as you are using a feature routing module, let the feature module appear before the AppRoutingModule in the module imports of AppModule. You know routing order matters.

  imports: [
    BrowserModule,
    CustomerModule,
    OrdersModule,
    AppRoutingModule, // brought this down
    SharedModule,
    CoreModule
  ],