Question

我尝试使用window.open（url）在有角度的应用程序中的新窗口中打开图像。但是新窗口将重定向到有角度的应用程序，而不是加载资源。

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

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

我正在使用服务人员使用Angular 7.2。

我试图在window.open中指定绝对URL（带有协议和主机名），但这无济于事。

如果我在Chrome开发工具中绕过了Service Worker，它将起作用。

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')
    }
}

Answer 1

这是与服务人员有关的问题。

我必须在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

在新窗口中以角度发布图像

1 个答案: