Fetching query parameters from HTTP get/post in angular 4 service

Question

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=test

i'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.

score 0 · Accepted Answer · answered Aug 29 '18 at 05:53

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 :-

https://test-pubg.sohum.com:4200/#/securelogin

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.

score -1 · Answer 2 · answered Aug 16 '18 at 11:36

-1

First of all, you should use Angular Forms, not HTML <form action attribute which interferes with Angular's SPA design.

I think your proxy-conf.json isn't valid too

You should try

{
  "/**": {
    "target": "http://test-pubg.sohum.com:8080", //back-end adress:port
    "secure": false,
    "changeOrigin": true
  }
}

Then, in the SecureloginReceiverComponent you should call the SecureloginService's method to post the form's input data (sent through method attributes).

No need to refresh the page nor put the input data to the URL.

answered Aug 16 '18 at 11:36

Paulie

164
5

i don't think a normal HTML form cannot send data using post. How does it matter whether i'm using HTML form or angular form for sending data. Angular is designed to work for HTTP protocol across platforms.Secondly, i've already tried the way you've suggested for proxy settings, didn't make any difference. Although mine are working somehow. Thanks for giving your time. If in case you find anything. Please let me know – codechefvaibhavkashyap Aug 16 '18 at 12:28
Vanilla HTML form reloads whole application which is against the Angular's SPA design and is really bad for user experience. Anyway I don't see any code that sends the XHR request with the data. What's your application architecture? – Paulie Aug 16 '18 at 13:34

Fetching query parameters from HTTP get/post in angular 4 service

2 Answers2