Angular 4 route to external url

Question

I am trying to get a route to an external URL. Below is my example so far.

The error I am getting is:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'https:/google.com'

Error: Cannot match any routes. URL Segment: 'https:/google.com'

here is my code

ViolatorLink() {
    this.router.navigate(['https://www.google.com/'], {
        queryParams: {mid: this.mid}
      }
    );
  }

You can refer below link in detail [Route to external URL](https://stackoverflow.com/questions/40150393/how-to-redirect-to-an-external-url-from-angular2-route-without-using-component/40395382) — Nilesh Sutar, Jun 14 '18 at 17:15

score 9 · Answer 1 · answered Jun 14 '18 at 17:07

9

Ideally, you should use the window.location.href = "https://www.google.com"; for your external URL calls because this.router.navigate looks the URL in angular routings.

Your function should be like:

ViolatorLink() {
    window.location.href = "https://www.google.com";
  }

answered Jun 14 '18 at 17:07

Rohit.007

3,414
2
21
33

why are you posting same answer agian – Sajeetharan Jun 14 '18 at 17:22
1

I didn't check, you have posted something. Only one solution is for the problem so our answers are similar. @Sajeetharan – Rohit.007 Jun 14 '18 at 17:24
Thanks for the response as well. Maybe you could help some of my additional questions above? @Rohit.007 – Alex D Jun 14 '18 at 17:49
Yes please ask your queries – Rohit.007 Jun 14 '18 at 17:54
1

okay, I Just checked your responses in another answer. You can take all the parameters in your `ViolatorLink()` function and you can concate your parameters in the URL e.g. `window.location.href = "https://www.google.com/id/" + yourId` where `yourId` is a variable. – Rohit.007 Jun 14 '18 at 18:00
Can you accept the answer and vote-up if it worked for you? – Rohit.007 Jul 28 '18 at 17:41

score 5 · Answer 2 · answered Jun 14 '18 at 17:03

5

You need to use instead of this.router.navigate

window.location.href = "https://www.google.com";

this.router.navigate will navigate to only the elements configured in your router config module. So you are getting the error above.

answered Jun 14 '18 at 17:03

Sajeetharan

216,225
63
350
396

awesome, now how can I navigate the url to www.google.com/ and have this.mid value come after? – Alex D Jun 14 '18 at 17:18
if you want to pass parameter that should be with the href – Sajeetharan Jun 14 '18 at 17:23
what do you want to actually do? – Sajeetharan Jun 14 '18 at 17:35
i have an external link foo.com and I need to pass params to it like www.foo.com/11/ – Alex D Jun 14 '18 at 17:38
what is the benefit of that? it dpeneds on the external sites as well – Sajeetharan Jun 14 '18 at 17:39
because I have to create a link that opens a sister site and pass params into it. – Alex D Jun 14 '18 at 17:41
so how do i configure router config module? And where that does live? did you mean app.routing.module? please advise - thanks – Gel Sep 01 '19 at 15:52

score -4 · Answer 3 · answered Jan 17 '20 at 00:05

-4

<a [href]="https://www.yourExternalURL.com">

I am typing extra characters because SO now needs at least 30 characters in an answer.

answered Jan 17 '20 at 00:05

Andrew Koper

6,481
6
42
50

1

SO needs 30 characters so you'd explain your answer instead of just posting code(as you did). Also this is only helpful if you want to redirect to an external URL directly from the view. If instead you want to redirect from the component then this doesn't help. – Vinc Aug 25 '20 at 10:48

Angular 4 route to external url

3 Answers3