I'm making login check. Once that is the success, I want to redirect the user to another page in the same application. I have below code to do that.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { DataService } from '../services/data.service';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
styleUrls: ['./login.component.css'],
})
export class LoginComponent {
static location:Location;
constructor(private formBuilder: FormBuilder,
private dataService: DataService,location: Location) {
LoginComponent.location = location;
this.loginForm = this.formBuilder.group({
username: this.username,
password: this.password
});
}
loginForm : FormGroup;
username = new FormControl('', Validators.required);
password = new FormControl('', Validators.required);
Login(){
this.dataService.doLogin(this.loginForm.value.username,this.loginForm.value.password).subscribe(function(res){
console.log(LoginComponent.location)
LoginComponent.location.go('/report');
},function(err){
console.log("Err",err)
});;
}
}
But the issue is, URL in browser changed to http://localhost:3000/report. But when the page is not loading. When I hit reload, then the new page is getting displayed.
What is wrong in this code? location.go() won't load the URL.
If you use angular router, then use Router class which is located at angular/router namespace. Take a look at this Angular Router Navigation example. I think that will help to solve your problem. Location class is meant to interact with URL, but not navigate in application routes (as it did in angular 1).
Quote from that article about Location class:"
Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing.