Приложение Angular в настраиваемом URL-адресе с 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",
      "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" на правильный путь, и теперь он работает . Но это уловка ...

Спасибо большое

Источник

1 ответ

Один из способов изменить пути, которые Angular генерирует при построении, - использовать опцию с CLI ng build. В сочетании с этим вы можете до некоторой степени изменять пути, но все равно можете застрять, если вы используете рендеринг на стороне сервера или, например, локали / культуры на стороне сервера. Но для простого развертывания комбинация того и другого должна работать.

Тем не менее, к сожалению, в пути, которые создаются в файле, включается только значение. Это проблема Angular CLI и до сих пор не решена.

Обходной путь - запустить ngsw-config команда, предоставляющая ему базовый параметр href в качестве последнего параметра / опции.

Например, вы могли бы сделать следующее:

если твой --base-href является /web/ и ваш --deploy-url является dist/ которые при развертывании приводят к тому, что ваши пути становятся /web/dist/

поэтому для правильного создания таких путей в ngsw.json файл, вам нужно будет запустить следующую команду вручную:

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

Я пошел дальше и использовал npm postскрипты (https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html) и настроил мои package.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:prod cmd.

Надеюсь, это поможет. Я тоже хочу, чтобы Angular CLI предлагал больше возможностей для настройки путей в развернутых файлах.

Источник
Другие вопросы по тегам