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: https://angular.io/api/router/Router#navigate — RustyPiranha, Jan 12 '18 at 01: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, Jan 12 '18 at 02:11
with a little digging I found this: https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page. Essentially, you can just use javascript, like this: `window.history.pushState('data', "title", "/subFolder2");` — RustyPiranha, Jan 12 '18 at 02:25
*"but router is overkill for me"* .. find that hard to believe — charlietfl, Jan 12 '18 at 02: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, Jan 12 '18 at 07:19
QuietOran, your solution totally works. But I cannot seem to figure out what the 1st param is all about, Mozilla docs say it is the state obj but, I don't get it. state object —beginQuote--> The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.The state object can be anything that can be serialized. <---endQuote. Ok, but what do I store in it? (Your "data" is still there BTW ) — Average Joe, Jan 12 '18 at 08:24

score 1 · Answer 1 · answered Jan 12 '18 at 02:00

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');
    }
}

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, Jan 12 '18 at 02:05
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. — Average Joe, Jan 12 '18 at 02:14
I'm sorry, but what version of `Angular` are you using? It looks like it's Alpha or Beta.. — developer033, Jan 12 '18 at 05:00

Using the angular's location class correctly

1 Answers1