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.

Answer 1

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