Angular interpolating {{ }} in url params, is there a way to sanitize the url?

Question

We have an edge case issue where an external application requires a specific url parameter to be present in the url request to our website:

https://stackoverflow.com/questions/ask?abc=123

Here is a screenshot:

Occasionally, the url parameter will not render correctly causing the url to become:

https://stackoverflow.com/questions/ask?abc={{}}

We have angular running on our application, it cannot parse this causing unnecessary errors for the webpage.

Does angular have a way of encoding the url before it hits the app?

Details

• Angular 1.6.6

Current Solution

We have a temporary nginx redirect solution in place but believe its better if we fixed the source of the issue.

We've done a lot of reading into changing the template tags but this is a huge fix.

Expected

We don't use any custom url variables. We want to it not throw an error and function normally as expected when not parse https://stackoverflow.com/questions/ask?abc={{}}

Answer 1

You need to bind the parameter in [queryParams]="{ 'abc':'test' }"

Since a object needs to be passed, you can create the object dynamically in typescript.

Try like this:

HTML:

<a [routerLink]="['https://stackoverflow.com/questions/ask']" [queryParams]="getQueryParam()">Link</a>

TS:

  getQueryParam() {
    var queryParam = {};
    queryParam['abc'] = this.some_variable;
    return queryParam;
  }

Answer 2

The issue may be related to this:

https://github.com/angular/angular.js/commit/5930b8ee27e441aa4422d9174dcc7eb7db30e400.

Which is saying it is a known issue with Angular.

Answer 3

Upon research, we have found that Drupal render forms using a function called request_uri(), which does not encode the output. Consequently, the action url causes angular to error when it loads on the page.

The solution to this we found is adding in a redirect.