Angular routing with pages following parameters

Question

I have an Angular 5 app in which I need a URL to use the following form:

www.example.com/#/company/<companyId>/transactions

I am using a non-named router outlet <router-outlet></router-outlet>

The companyId is a parameter. Initially I left off the transactions portion in the router and verified that I can correctly reach the transactions page associated with the CompanyTransactionsComponent.

The router rule was:

www.example.com/#/company/<id>/
{ path: 'company/:companyId', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId);

which worked fine, but when I changed to add /transactions:

www.example.com/#/company/<id>/transactions/
{ path: 'company/:companyId/transactions', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId + '/transactions/');

This was giving me an error Cannot match any routes. so I tried a couple other options below:

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent
        }
    ]
},

and:

RouterModule.forRoot([
    { path: 'company/:companyId', component: CompanyTransactionsComponent }
],
RouterModule.forChild([
    { 
        path: 'company/:companyId',
        children: [
            {
                path: 'transactions',
                component: CompanyTransactionsComponent
            }
        ]
    },
])

Both give the same error. This seems to only happen because I use the /transactions after the parameter /:companyId. Any idea how I can accomplish having a sub-page following the parameter in the url?

EDIT CompanyTransactionsComponent is used for both parent and child because there is not yet a CompanyHomeComponent, so the transactions page will be the default page when no sub-page is entered. There are multiple children besides the CompanyTransactionsComponent I left out to keep the code shorter.

DeborahK · Answer 1 · 2019-02-01T20:40:14.807

1

What is the purpose of the "sub-page" if you are routing to the same component?

This code will allow you to have a route with the additional text in the URL. But if you are indeed looking to have a "sub-page", it should route to a different component to display that "sub-page".

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent  //<-- This should be the "sub page"
        }
    ]
},

Also, when defining the children property as you have above, you normally add a second <router-outlet></router-outlet> in the "parent" component's template. In this example, it would be the CompanyTransactionsComponent template.

If you don't really need to display another route, then this should do it:

{ 
    path: 'company/:companyId/transactions', 
    component: CompanyTransactionsComponent,
},

edited Feb 01 '19 at 20:40

answered Feb 01 '19 at 20:22

DeborahK

57,520
12
104
129

We will later add, say, a CompanyHomeComponent which will be the parent. There are multiple children I left out for simplicity's sake. The last code you listed is the first thing I tried, which led me to try using the children attribute. – kilkfoe Feb 01 '19 at 21:49
1

That last syntax *should* work. Have you tried `this.router.navigate(['/company', user.companyId, 'transactions']);` instead of navigateByUrl? – DeborahK Feb 01 '19 at 22:09
That does seem to work, so I hadn't tried refreshing the page, which would have worked all along. But I find it strange that `this.router.navigateByUrl('/company/' + user.companyId + '/transactions/');` does not work – kilkfoe Feb 05 '19 at 22:17
Actually, refreshing the page does not work - I really thought it did, but as I'm trying it now it always gives me the same error `Cannot match any routes. URL Segment: 'company/'` - It is missing the /transactions in the URL for some reason. I also realized that my example URLs I provided were missing the hash `/#/`, so I edited the question to add that in – kilkfoe Feb 07 '19 at 22:36
Can you build a simple stackblitz that demonstrates your error with the minimum amount of code? – DeborahK Feb 07 '19 at 22:40

score 0 · Answer 2 · answered Feb 01 '19 at 20:20

transactions as child route should work. As the path match is always remainder of the url.

const appRoutes: Routes = [{
    path: 'company/:companyId',
    component: CompanyTransactionsComponent,
    children: [
      {
        path: 'transactions',
        component: CompanyTransactionsComponent
      }
    ]
  }];

  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
      )
      // other imports here
    ],
  })

Angular routing with pages following parameters

2 Answers2