以角度问题在新窗口中打开图像答案

【问题标题】：Issue opening image in new window in angular以角度问题在新窗口中打开图像
【发布时间】：2019-03-27 11:14:19
【问题描述】：

我尝试使用 window.open(url) 在 Angular 应用程序的新窗口中打开图像。但是新窗口被重定向到 Angular 应用程序而不是加载资源。

我的 Angular 应用托管在 example.fr 上，基本路径为“/”，我尝试加载托管在 example.fr/api/image.png 上的图像。

当我以私密模式打开链接时，一切正常。

我在 Angular 7.2 上，使用服务人员。

我尝试在 window.open 中指定绝对 url（带有协议和主机名），但没有帮助。

如果我绕过 Chrome 开发工具中的 service worker，它就可以工作。

文件预览.component.html：

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

文件预览.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')
    }
}

【问题讨论】：

你能在这里显示一些和平的代码吗？
你有什么错误吗？？？如果是，请在此处发布
不，我没有收到任何错误，新窗口将打开我的 Angular 应用程序而不是图像。我没有在网络中收到对图像的请求。
您的图片网址开头是否包含“http”或“https”？据我了解，没有 http/https angular 会将 url 视为路由。
是的，我尝试使用绝对路径 (example.fr/api/image.png) 和相对路径 (/api/image.png)。

标签： javascript angular

【解决方案1】：

这是与Service Worker有关的问题。

我必须在ngsw-config.json 中添加以下配置以从服务人员中排除我的 api 入口点：

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

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

【讨论】：