2

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

编译后的应用程序位于“c:\-website-folder-\ng-app\dist”中。然后用户可以使用如下 URL 访问 App：“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",
      "updateMode": "prefetch",
      "cacheQueryOptions": {
        "ignoreVary": true
      },
      "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": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

问题

如您所见，资源引用到 ROOT，Angular ServiceWorker 将尝试使用这样的 URL 下载这些资源

代替

帮助

有一个解决方案可以让 Angular Builder 指定正确的 URL 路径吗？

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

非常感谢

4

1 回答 1

0

修改 Angular 在构建时生成的路径的一种方法是使用--deploy-urlCLI 的ng build. 结合--base-href您可以在一定程度上修改路径，但如果您使用服务器端渲染或服务器端语言环境/文化，可能仍然会卡住。但是对于简单的部署，两者的组合应该可以工作。

也就是说，不幸的是，只有 的值--base-href包含在ngsw.json文件中生成的路径中。这是 Angular CLI 的一个问题，到目前为止还没有解决。

一种解决方法是运行ngsw-config提供基本 href 参数作为最后一个参数/选项的命令。

例如，你可以做的是

如果您的--base-hrefis/web/和 your --deploy-urlis dist/which 在部署时会导致您的路径是/web/dist/

因此，对于在文件中正确生成这些类型的路径，ngsw.json您必须手动运行以下命令：

./node_modules/.bin/ngsw-config ./dist/ ./ngsw-config.json "/web/dist/"

我更进一步并使用了 npmpost脚本（https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.htmlpackage.json ）并像这样配置我

...
"build:prod": "ng build --prod --base-href=\"/web/\" --deploy-url=\"dist/\"",
"postbuild:prod": "ngsw-config ./dist/ ./ngsw-config.json \"/web/dist/\"",
...

这样postbuild:prod总是在build:prodcmd 之后运行。

希望有帮助。我也希望 Angular CLI 能够提供更多选项来自定义部署文件中的路径。

于 2021-09-09T10:14:53.680 回答