There is some fundamental concept of routing in Angular 4 that I don't understand.
index.html:
<base href="/">
File structure:
- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts
I have a link in my header.component.html:
<a class="nav-link" [routerLink]="['/collections']">
Collections
</a>
If I click it I land on localhost:4200/collections. When a button is clicked, the url is programmatically changed (in collection.component.ts):
this.router.navigate(['/collections/', collection.name]);
I end up on localhost:4200/collections/name - all fine. Now I programatically want to get back to /collections (in collectioninfo.component.ts):
this.router.navigate(['/collections']);
But that doesn't work. The url doesn't change and I get an error that says a parameter couldn't be loaded - so apparently /collections/name is being loaded again. Thought it might is a path issue, but things like this also don't work:
this.router.navigate(['../collections']);
Additional info: When I manually reload the page while being on /collections I'm being forwarded to the home page again, but I think that is another issue and not related to this behaviour.
app.routing.ts:
const APP_ROUTES: Routes = [
...
{ path: 'collections', component: CollectionComponent },
{ path: 'collections/:id', component: CollectionInfo },
];
Turns out my firebase code is messed up - it tries to reload the page before going to another route. That caused an error, because some parameters that handed over from the previous route were missing.
export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })
in app.routing.ts was very useful for debugging.