CODEWITHSUNDEEP
angularangular8angular-router
tris
tris

Reputation: 1049

Angular8 routing empty or parameterized

In a child module (path "invoice") I'm trying to register the following routes:

const routes = [
{
    path: '',
    component: SearchComponent
},
{
    path: ':quotationNumber',
    component: InvoiceComponent
}
];

The idea is that "/invoice" shows the SearchComponent while "/invoice/any" shows the InvoiceComponent, passing "any" as parameter "quotationNumber". But as soon as the second route is added it always is chosen! "/invoice" also loads the InvoiceComponent with an empty parameter.

Setting

{
   path: '',
   component: SearchComponent,
   pathMatch:'full'
}

does not change the behavior.

Edit: Actually the scenario is a bit different - maybe this causes the issues?

AppModule loads CustomerModule:

{
    path: 'customer',
    loadChildren: () => import('./customer/customer.module').then(mod => mod.CustomerModule)
},

CustomerModule loads InvoiceModule:

{
    path: 'invoice',
    loadChildren: () => import('./invoice/invoice.module').then(mod => mod.InvoiceModule)
},

and the InvoiceModule loads the module with the components as described.

The full path actually is

"Any" always get loaded! But I've noticed that calling "/customer/invoice" calls the InvoiceComponent (route "/customer/invoice/:param") with param "invoice"! It looks like the 2nd module does not remove "invoice" from the url when passing to its children.

EDIT EDIT: I found the mistake: the 2nd module imported the 3rd one, too. That caused its routes to get loaded as current and not as child. 2nd answer is for a correct setup correct.

Upvotes: 0

Views: 67

Answers (2)

Mustafa Tawfig
Mustafa Tawfig

Reputation: 429

replace routes object with

  const routes: Routes = [{
        path: "invoice/:quotationNumber",
        children: [
          {
            path: "**",
            component: InvoiceComponent
          }
        ]},
       {
        path: "/invoice",
        component: SearchComponent

      }]

Upvotes: 0

yusufcmrt
yusufcmrt

Reputation: 166

Add pathMatch field for empty path:

{
  path: '',
  component: SearchComponent,
  pathMatch: 'full',
},

Upvotes: 1

Related Questions