1

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:

Example error of {{}}

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={{}}

Adrita Sharma
  • 17,967
  • 8
  • 40
  • 61
Tuan B
  • 41
  • 4
  • use `ng-href` which will put href only once the string is parsed – Pierre Emmanuel Lallemant Jun 04 '19 at 08:29
  • Are you using Angular or AngularJS? You put both tags to your question but they are different frameworks with different directives. Also, it will be easily to help if you post the HTML code where the link is – VirgilioGM Jun 04 '19 at 08:33
  • 1
    @VirgilioGM I've updated the question with some screenshots, tags and more details. We are currently using angular 1.6. – Tuan B Jun 04 '19 at 10:21

3 Answers3

2

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;
  }
Adrita Sharma
  • 17,967
  • 8
  • 40
  • 61
0

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.

Tuan B
  • 41
  • 4
0

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.

Tuan B
  • 41
  • 4