Angular 4: Route routing not working

Question

There is some fundamental routing concept 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, I will land on localhost: 4200 / collections. When the button is clicked, the URL changes programmatically (in collection.component.ts):

this.router.navigate(['/collections/', collection.name]);

I end up with localhost: 4200 / collections / name - everything is fine. Now I programmatically want to return to / collections (in collectioninfo.component.ts):

this.router.navigate(['/collections']);

But that does not work. The URL does not change, and I get an error saying that the parameter cannot be loaded - apparently / collection / name is loading again. Thought it might be a path issue, but things like this also don't work:

this.router.navigate(['../collections']);

: /, , , .

app.routing.ts

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];

Answer 1

, firebase - , . , , , .

export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })

app.routing.ts .

Answer 2

this.router.navigate(['../collections']); localhost:4200/collections/collections. this.router.navigate(['../']);

, ActivatedRoute relativeTo:

constructor(route: ActivatedRoute, router: Router) {}

navigate() {
  this.router.navigate(['../'], { relativeTo: this.route });
}

relativeTo , , , .