Distinguishing Between Empty Path and No parameter

Question

I would like to create an angular SPA that has two routes:

http://mydomain/       <- Shows homepage
http://mydomain/2017   <- Shows results for 2017
http://mydomain/2018   <- Shows results for 2018

Where the 2017 and 2018 parts of the URL are parameters to a controller. I have attempted to achieve this using the following routes:

export const MyAppRoutes: Routes = [ 
    { path: "",  component: HomepageComponent },
    { path: ":resultId",  component: ResultComponent },
];

However, accessing http://mydomain will render the ResultComponent; the route parameters will simply be empty.

How can I inform the router that it should only match against ResultComponent if the parameter :resultId is present?

Answer 1

use pathMatch: full with empty path route configuration as follows:

export const MyAppRoutes: Routes = [ 
    { path: "",  component: HomepageComponent, pathMatch: full },
    { path: ":resultId",  component: ResultComponent },
];