Issue opening image in new window in angular

Question

I try to open an image in a new window in an angular app using window.open(url). But the new window is redirected to the angular app instead of loading the resource.

My angular app is hosted on example.fr, with base path="/", and i try to load an image hosted on example.fr/api/image.png.

When i open the link in private mode everything works fine.

I'm on angular 7.2, using a service worker.

I tried to specify the absolute url (with protocol and hostname) in window.open, but it does not help.

It works if I bypass the service worker in the Chrome dev tools.

file-preview.component.html :

<span (click)="openImage()">Open image in new window</span>

file-preview.component.ts :

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-file-preview',
  templateUrl: './file-preview.component.html'
})
export class FilePreviewComponent implements OnInit {
    openImage() {
        window.open('https://example.fr/api/image.png')
    }
}

No i'm not getting any errors, the new window opens my angular app instead of the image. I don't event get a request for the image in the network. — user2816157, Mar 27 '19 at 11:20
does your image url includes 'http' or 'https' at the start of it ?? In my understanding, without http/https angular treats url as a route. — Kausha Shah, Mar 27 '19 at 11:26
Yes i tried with the absolute path (https://example.fr/api/image.png) and with relative path (/api/image.png). — user2816157, Mar 27 '19 at 11:28
Using `_blank` does not fix. Even if I copy / paste the url into a new tab it redirects to the angular app. However, it works if I use my image in `` — user2816157, Mar 27 '19 at 11:36
window.open('https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', '_blank') It works! Probably check your image url. If that is accessible or not. — Kausha Shah, Mar 27 '19 at 11:38
It works if the image is hosted on a different domain, i think the issue is that the image is on the same domain as my angular app. — user2816157, Mar 27 '19 at 11:42
This is probably because you have hosted the angular app in same domain and the angular app is fetching the route and redirecting it to its root — Joel Joseph, Mar 27 '19 at 11:43
@JoelJoseph yes, i wonder if there is any way to exclude a subdirectory from the angular router. — user2816157, Mar 27 '19 at 11:44
are both angular and api service running on same port ? does it run on nodejs ? — Joel Joseph, Mar 27 '19 at 11:49
maybe this article can help you : https://medium.com/@adrianfaciu/using-the-angular-router-to-navigate-to-external-links-15cc585b7b88 — Joel Joseph, Mar 27 '19 at 11:54
or you will have to let the server redirect the url instead of angular app — Joel Joseph, Mar 27 '19 at 11:57
read this article too : https://stackoverflow.com/questions/40150393/how-to-redirect-to-an-external-url-from-angular2-route-without-using-component/40395382 — Joel Joseph, Mar 27 '19 at 11:58
I tried redirecting directly, instead of opening a new window using `window.location.href` and `window.location.replace()` with no success, which seems to be the way to redirect on both the articles. Not sure implementing a custom redirect route (w/ or without a guard) would help in this case. I just found out that if i bypass the service worker, it seems to work fine with redirecting (and I belive it would work with window.open as well) — user2816157, Mar 27 '19 at 13:52

score 0 · Answer 1 · answered Mar 27 '19 at 14:25

It is a problem related to the service worker.

I had to add the following configuration in ngsw-config.json to exclude my api entry point from the service worker :

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ]
}

Source : Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json

Issue opening image in new window in angular

1 Answers1