自定义 url 路径中的 Angular 应用程序，带有 ServiceWorker

问题描述

我正在开发一个 Angular 10 应用程序。
它使用 Angular 的“服务工作者”来创建 PWA。

编译后的应用程序位于“c:\-website-folder-\ng-app\dist”中。然后用户可以使用这样的 URL 访问应用程序：“https://website.com/ng-app/dist”。

ServiceWorker 的配置

Angular ServiceWorker 在“app.module”中配置：

@NgModule({
    imports: [
        CommonModule,browserModule,ServiceWorkerModule.register(
            `/ng-app/dist/ngsw-worker.js`,{
                enabled: true,scope: "/ng-app/"
            }
        ),...
    ]
})
export class AppModule {}

注册询问ServiceWorker的路径。

项目编译

Angular 项目是使用 ng build 命令编译的。
它创建并填充“dist”文件夹。它包含“ng-app.webmanifest”和“ngsw.json”。

“ngsw.json”文件

“ngsw.json”文件包含所有已编译的 JS 和资产的列表，如 GIF、CSS。 Angular ServiceWorker 使用这个文件来缓存资源。

{
  "configVersion": 1,"timestamp": 1613033261333,"index": "/index.html","assetGroups": [
    {
      "name": "app","installMode": "prefetch","updateMode": "prefetch","cacheQueryOptions": {
        "ignorevary": true
      },"urls": [
        "/address-book-editor-address-book-editor-module-es2015.51b00058cbaa9682510e.js","/address-book-editor-address-book-editor-module-es5.51b00058cbaa9682510e.js","/article-editor-article-editor-module-es2015.e4540348b2495fd50875.js","/article-editor-article-editor-module-es5.e4540348b2495fd50875.js","/Berry-editor-Berry-editor-module-es2015.8cc1850fb1455965c490.js","/Berry-editor-Berry-editor-module-es5.8cc1850fb1455965c490.js",...
      ],"patterns": []
    },{
      "name": "assets","installMode": "lazy","urls": [
        "/assets/components/fontawesome/fonts/fontawesome-webfont.eot","/assets/components/fontawesome/fonts/fontawesome-webfont.svg","/assets/components/fontawesome/fonts/fontawesome-webfont.ttf","patterns": []
    }
  ],"dataGroups": [],"hashTable": {
    "/address-book-editor-address-book-editor-module-es2015.51b00058cbaa9682510e.js": "4e6b67457c4b7549f331e6c2cbe3334d13129386","/address-book-editor-address-book-editor-module-es5.51b00058cbaa9682510e.js": "886188af27941dad766bcdcb3e2880b790cf32de","/article-editor-article-editor-module-es2015.e4540348b2495fd50875.js": "985558c2949d9b34d3cdc9e0b7d556d54508b208",...
  },"navigationUrls": [
    {
      "positive": true,"regex": "^\\/.*$"
    },{
      "positive": false,"regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

问题

如你所见，资源被引用到ROOT，Angular ServiceWorker会尝试像这样的URL下载这些

• https://website.com/---resource---

代替

• https://website.com/ng-app/dist/---resource---

帮助

有没有办法告诉 Angular Builder 指定正确的 URL 路径？

我尝试使用正确的路径更改“ngsw.json”文件，现在可以使用。但这是一个技巧...

非常感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）