1

I have an angular app running lets say in "www.mydomain.com" but I also have another app running in "www.mydomain.com/another" (an nginx server handles the routing).

So, what I want to achieve is to put an iframe pointing to "*www.mydomain.com/another*" to load the "another app", but instead, the angular router is trying to find a component for the "another" segment (because it's the same domain) and obviously is failing because there isn't any component defined for that route.

<iframe style="width: 100%;" [src]="www.mydomain.com/another"></iframe>

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'another'

Any idea on how could I tell to the router of the app containing the iframe that "this is not an internal route, just hit the proxy with the url and load the iframe as it should be"?

Thanks in advance

Fabricio Marrone
  • 11
  • 2

1 Answers1

0

This problem is easily solved with a proxy server. A possible solution:

  1. Setup nginx proxy.

docker-compose.yml:

version: '3.8'

services:
  proxy:
    container_name: proxy
    build:
      context: ./proxy
      dockerfile: Dockerfile
    network_mode: "host"

proxy/Dockerfile:

FROM nginx

COPY ./nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

proxy/nginx.conf (partial):

    server {
        listen       80 default_server;
        server_name  _;

        location / {
            proxy_pass http://localhost:4200/;
        }

        location /another/ {
            proxy_pass http://localhost:6000/another/;
        }
   }

Notice, that you angular application is supposed to be served on localhost:4200 and other "another app" - on a different port.

This is just a concept and I didn't check the above config. But, generally speaking, proxy should do the trick for you.

Aram Khachatrian
  • 239
  • 1
  • 5
  • Exactly, the problem is that the angular app is preventing the request to the proxy because is assuming that the route "www.mydomain.com/another" is an internal routing to some "another" path that doesn't exists, and because of that the error happens and the app does not fire a request to the proxy server. – Fabricio Marrone Oct 16 '20 at 18:51
  • Can you share essentials of your proxy config? – Aram Khachatrian Oct 16 '20 at 18:58
  • actually, my question is a duplicated of this one (just found): https://stackoverflow.com/questions/60431490/angular-router-is-catching-url-from-iframe please, take a look, is better explained I believe. Thank you for the help! – Fabricio Marrone Oct 16 '20 at 20:32
  • Yes, the question looks similar to yours but nevertheless the solution is a **proper proxy configuration**. Believe me or not a few days ago I have embedded a forum (served on http://example-domain.com/forum) into an Angular application served on http://example-domain.com and everything is working just fine. Did you notice in my original answer that angular app and an external app are served on localhost and on different ports? That's kind of essential. – Aram Khachatrian Oct 16 '20 at 20:53