I'm trying to send form data using the following HTML form :-
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="https://test-pubg.sohum.com:4200/securelogin" target="_blank" method="get">
Access: <input type="text" id="accessToken" name="accessToken"><br>
Refresh: <input type="text" id="refreshToken" name="refreshToken"><br>
<button type="submit">Submit</button><br>
</form>
now every time i click the submit button, another tab gets open(which is intended) with URL :- https://test-pubg.sohum.comt:4200/securelogin?accessToken=test&refreshToken=test
I'm getting blank browser console which is the problem
Now if i change the URL to the following(note the # added in the URL) and refreah the url by pressing F5 :- https://test-pubg.sohum.com:4200/#/securelogin?accessToken=test&refreshToken=testi'm getting the intended data on the browser console which is as follows :-
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
constructor called test test
This is happening even in the case the form's action method is post
Now on the action URL i've a angular 4 service running whose constructor is as follows :-
constructor(private route: ActivatedRoute,private router: Router,
private secureloginService: SecureloginService,private http: HttpClient) {
console.log("constructor called");
this.accessToken = this.route.snapshot
.queryParams['accessToken'];
console.log(this.accessToken);
this.refreshToken = this.route.snapshot
.queryParams['refreshToken'];
console.log( this.refreshToken);
this.route.queryParamMap.subscribe(params => {
console.log(params);
});
}
I'm not able send data on my submit button click. Also note that i've enabled HTTPS for my application. For reference i'm posting my angular routing details as follows :-
proxy.conf.js
{
"/" : "http://test-pubg.sohum.com:8080",
"secure": false}
componenet-routing.moudle.ts
const routes: Routes = [
{path: '', component: SecureloginReceiverComponent},
{path: 'securelogin/', component: SecureloginReceiverComponent,pathMatch: 'full' }
];
export const SecureloginRoutingModule = RouterModule.forChild(routes);
package.json:-
"start": "ng serve --disable-host-check --ssl 1 --proxy-config proxy.conf.json",
What could be the possible reason for this behavior. I've already followed related threads available on stackoverflow and github. for sort of help i'll be grateful.
So real problem was of HTTP status & unavailability of parameters in URL . ActivatedRoute will be able to read anything being passed in URL i.e. when the angular page is being called the query parameter should be visible in URL, then only ActivatedRoute will be able to read data. Secondly, i was making a inter-server i.e. from one server to another so even though at the time of URL being called was :-
https://test-pubg.sohum.com:4200/#/securelogin?accessToken=abc&refreshToken=cccc
but after redirection it was getting changed to the following :-
omitting the query parameter, making them unavailable in URL. Hence ActivatedRoute was unable to read. So as its solution what i found, one has to explicitly set HTTP status before redirection to OK . Follow the sample code:-
ModelAndView view = new ModelAndView("redirect:" + appUrl);
view.addObject("usr", userName);
view.setStatus(HttpStatus.OK);
And another very important to note is this concept works only if you are making a HTTP GET request.