How to pass request parameters to Angular app?

Question

I have an Angular app (built by Angular CLI) that is hosted via express on Heroku this way:

const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

This app is an iframe at vk.com where a browser of a user passes a string in the request to the server, which is hosting my app, containing some important information like user id etc. It looks like this (real values are replaced with an asterisk):

path="/?api_url=https://api.vk.com/api.php&api_id=*&api_settings=1&viewer_id=*&viewer_type=4&sid=*&secret=*&access_token=*&user_id=0&group_id=*&is_app_user=1&auth_key=*&language=0&parent_language=0&is_secure=1&ads_app_id=*&referrer=unknown&lc_name=*&sign=*&hash="

Is there any way to extract those values and pass them to an app before it goes to user's browser and load? So they could be stored in a variable or something like that.

Not sure from your wording whether it's browser request, or server response. So hard to answer. The module @angular/http has things like Request, Response, Headers, RequestOptions,URLSearchParams. Have a Google on those names within context of Angular 2 or 4.. — JGFMK, Jul 30 '17 at 17:03
When a user opens a page at `vk.com` with an iframe with my app inside, his browser makes a request to my hosting app, which is a javascript with `express`. In that script I can get all the parameters form the original request and then I need to pass them to an actual Angular app that is being hosted via `express`. — Leonid Bor, Jul 30 '17 at 17:30

score 1 · Answer 1 · answered Jul 30 '17 at 17:14

You can get location values into javascript like this. You can put this code inside root component . getParameterName function is copied from link mentioned above.

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`+getParameterByName('name');
  }
}

I tried here and it works . https://plnkr.co/edit/I2hTylwlwc6TTHf17tHo?p=preview

How to pass request parameters to Angular app?

1 Answers1