Using the angular's location class correctly

Question

I'm on http://myexaple.com/subFolder1

and I want this.location.go to change the URL at the top from http://myexaple.com/subFolder1 to http://myexaple.com/subFolder2

It's as simple as that.

So, I go

this.location.go('/subFolder2'); // what else would you do, anyway?!

But the result is http://myexaple.com/subFolder1/subFolder2

The docs at https://angular.io/api/common/Location feel like what I'm doing seems to be the right thing to do.

What am I missing here?

its because location normalizes everything to the current path you're on. Try using the Router instead: angular.io/api/router/Router#navigate — RustyPiranha
– RustyPiranha, Commented Jan 12, 2018 at 1:57
But router is an overkill for me. there must be another way to make a change on the URL ( without really requiring a new navigation process to start rolling as in the case with router. ) In the docs, it talks about "prepareExternalUrl", that might be a way out here, maybe. I'm not sure. But I could not try it out. How do you use prepareExternalUrl in the code? Do you do this.location.go.prepareExternalUrl('/subFolder2')? — Average Joe
– Average Joe, Commented Jan 12, 2018 at 2:11
with a little digging I found this: stackoverflow.com/questions/3338642/…. Essentially, you can just use javascript, like this: window.history.pushState('data', "title", "/subFolder2"); — RustyPiranha
– RustyPiranha, Commented Jan 12, 2018 at 2:25
"but router is overkill for me" .. find that hard to believe — charlietfl
– charlietfl, Commented Jan 12, 2018 at 2:54
well, yes, out of context, it does sound weird but hey it is what it is in this particular app and in that particular instance. — Average Joe
– Average Joe, Commented Jan 12, 2018 at 7:19

Triet Pham · Accepted Answer · 2018-01-12 02:00:13Z

1

Yes, for redirecting from one route to another you should not be using location.go, it generally used to get normalized url on browser.

Rather you should use Router API's navigate method, which will take ['routeName'] as you do it while creating href using [routerLink] directive.

If you wanted redirect via URL only then you could use navigateByUrl which takes URL as string like router.navigateByUrl(url)

import { 
  ROUTER_DIRECTIVES, 
  RouteConfig, 
  ROUTER_PROVIDERS, 
  Location, //note: in newer angular2 versions Location has been moved from router to common package
  Router 
} from 'angular2/router';

constructor(location: Location, 
            public _userdetails: userdetails,
            public _router: Router){
    this.location = location;
}
login(){
    if (this.username && this.password){
        this._userdetails.username = this.username;
        //I assumed your `/home` route name is `Home`
        this._router.navigate(['Home']); //this will navigate to Home state.
        //below way is to navigate by URL
        //this.router.navigateByUrl('/home')
    }
    else{
        console.log('Cannot be blank');
    }
}

answered Jan 12, 2018 at 2:00

Triet Pham

881 silver badge14 bronze badges

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

4 Comments

Average Joe Over a year ago

Thank you but in my use case, I must not navigate to that URL. I'm only updating the URL at the browser's address bar ( so it can be copied/shared etc. ) but I just do not want to navigate to that url. ( Cause doing so, changes other things, which I do not need to get into).

Average Joe Over a year ago

Is the "navigate" just for the browser address bar update? It does not trigger the effect of really navigating to that URL, right? If so, this maybe the solution.

developer033 Over a year ago

I'm sorry, but what version of Angular are you using? It looks like it's Alpha or Beta..

Average Joe Over a year ago

I'm using angular 4.3 developer033.

Collectives™ on Stack Overflow

Using the angular's location class correctly

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related