Angular 4: Routing to a route doesn't work

Question

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 },
];

have you tried navigateByUrl instead of navigate, I don't know if it will fix your issue, but I use that for my programmatic page changes — Surreal
– Surreal, Commented Sep 13, 2017 at 15:09
Thanks for the hint, unfortunately that doesn't work either (some behaviour). — user3255061
– user3255061, Commented Sep 13, 2017 at 15:16
how is your empty path defined and what is isAuthenticated in your header? — JayDeeEss
– JayDeeEss, Commented Sep 13, 2017 at 15:28
Flip the order of your routes, making the most specific route first. The reason you're getting the error regarding the missing parameter is because /collections is falling through to the CollectionsInfo route. Alternatively, use an exact match for the route. — Brandon Taylor
– Brandon Taylor, Commented Sep 13, 2017 at 15:30
@Surreal: It just works without the brackets anyway. But thanks for the hint. — user3255061
– user3255061, Commented Sep 13, 2017 at 19:57

user3255061 · Accepted Answer · 2017-09-18 00:15:22Z

6

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.

answered Sep 18, 2017 at 0:15

user3255061

1,8151 gold badge32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan Stiza · Accepted Answer · 2018-03-21 18:32:47Z

5

In your relative path this.router.navigate(['../collections']); you are trying to navigate to localhost:4200/collections/collections. Try this.router.navigate(['../']);

If this doesn't work, also supply the ActivatedRoute as a relativeTo parameter:

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

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

relativeTo works by creating a path relative to whatever entry you provide, and it does not necessarily need to be the current route.

edited Mar 21, 2018 at 18:32

Juan Stiza

5232 silver badges16 bronze badges

answered Sep 13, 2017 at 15:39

tylerwgrass

6564 silver badges19 bronze badges

5 Comments

user3255061 Over a year ago

this.router.navigate(['../']) doesn't throw an error, but it leads me to my homepage. this.router.navigate(['../collections']) doesn't work though, it throws the same error as stated above. I then tried ActivatedRoute: Imported it (import { ActivatedRoute } from '@angular/router';) and put it in the constructor, but "relativeTo: route" throws a syntax error: Cannot find name "route" any. Although it's properly written in the constructor: route: ActivatedRoute. Do you have a hunch why it's behaving like that?

tylerwgrass Over a year ago

Try changing route to this.route. I make this mistake more often than I'd like to admit.

user3255061 Over a year ago

This could be pretty embarrassing, but I have no clue what I'm doing wrong syntax wise. Must be a small thing, but I don't see it. As it's not related to the original issue I thought it's better to post this on pastebin: pastebin.com/CY3M2Gvk. Can you spot any obvious error there?

tylerwgrass Over a year ago

I don't see anything wrong with what you have there, and using this.router.navigate(['/collections']); should have worked fine as well. Maybe there is something else.. But I don't see anything wrong with what you have. I'm sorry I couldn't help any more :(

user3255061 Over a year ago

I missed "public" in the constructor. But still relativeTo doesn't solve the problem. Thanks for your help though.

Collectives™ on Stack Overflow

Angular 4: Routing to a route doesn't work

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related