Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG][PWA] Url error in the "ngsw.json" file with a "baseHref" pointing to a file (eg: "/index.html")

Open
#12,853 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript

Research direction

Reproduce the PWA build using the baseHref values in angular.json and inspect the generated ngsw.json. Start with the build path that constructs service-worker URLs; done means a file-valued baseHref keeps index.html as the index while asset URLs use its containing path, without the duplicated /index.html/ segment.

Written by the indexing model from the issue text.

Description

area: @angular-devkit/build-angular freq1: low severity3: broken type: bug/fix
Bug Report or Feature Request
- [X] bug report -> please search issues before submitting
- [ ] feature request

From here: https://github.com/angular/angular/issues/26917

Command
- [X] build
Versions
Angular CLI: 7.0.4
Node: 10.8.0 (npm: 6.3.0)
OS: win32 x64
Angular: 7.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4
@angular-devkit/schematics        7.0.4
@angular/cli                      7.0.4
@angular/pwa                      0.10.4
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Current behavior

I have a problem with the file ngsw.json (dist/xxx/ngsw.json), when I build my application.
Here is the configuration of my file angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xxxxxx-xxxxxx-web": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref": "/index.html",   <-- baseHref with path to a file
            ...
          },
          "configurations": {
            "develop": {
              ...
              "baseHref": "/dev-web-xxxxxx-xxxxxx/index.html",   <-- baseHref with path to a file
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.develop.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
            ...

As you can see, my baseHref points to a file (index.html). And when I compile, here is the result of the file ngsw.json:

{
  "configVersion": 1,
  "index": "/dev-web-xxxxxx-xxxxxx/index.html/index.html",
  "assetGroups": [                 ^^^^^^^^^^
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [                 vvvvvvvvvv
        "/dev-web-xxxxxx-xxxxxx/index.html/4.459d2c031076fa54578c.js",
        "/dev-web-xxxxxx-xxxxxx/index.html/5.b0a92526f07730e41004.js",
        "/dev-web-xxxxxx-xxxxxx/index.html/index.html",
        "/dev-web-xxxxxx-xxxxxx/index.html/main.284d15247a9766d625e1.js",
        "/dev-web-xxxxxx-xxxxxx/index.html/polyfills.f8bea440aac573c30541.js",
        "/dev-web-xxxxxx-xxxxxx/index.html/runtime.e04cbf91ceee4f9b3494.js",
        "/dev-web-xxxxxx-xxxxxx/index.html/styles.380a38f67b77a997829f.css"
      ],                        ^^^^^^^^^^
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [                 vvvvvvvvvv
        "/dev-web-xxxxxx-xxxxxx/index.html/assets/icons/icon-128x128.png",
        "/dev-web-xxxxxx-xxxxxx/index.html/assets/icons/icon-144x144.png",
        ...                     ^^^^^^^^^^

As you can see, it generates all the urls of the file with the .../index.html/..., as if it were a folder. As this file is used for the cache of the application, the cache does not work since it is not the right url...

Expected behavior

I think the file should have looked like this:

{
  "configVersion": 1,
  "index": "/dev-web-xxxxxx-xxxxxx/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/dev-web-xxxxxx-xxxxxx/4.459d2c031076fa54578c.js",
        "/dev-web-xxxxxx-xxxxxx/5.b0a92526f07730e41004.js",
        "/dev-web-xxxxxx-xxxxxx/index.html",
        "/dev-web-xxxxxx-xxxxxx/main.284d15247a9766d625e1.js",
        "/dev-web-xxxxxx-xxxxxx/polyfills.f8bea440aac573c30541.js",
        "/dev-web-xxxxxx-xxxxxx/runtime.e04cbf91ceee4f9b3494.js",
        "/dev-web-xxxxxx-xxxxxx/styles.380a38f67b77a997829f.css"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/dev-web-xxxxxx-xxxxxx/assets/icons/icon-128x128.png",
        "/dev-web-xxxxxx-xxxxxx/assets/icons/icon-144x144.png",
        ...

Minimal reproduction of the problem with instructions

You just have to create an application (which uses PWA) and have a baseHref that points to a file (eg: index.html). And when you compile your application, the url generated in the ngsw.json file will be wrong.

What is the motivation / use case for changing the behavior?

I think it would just take into account when the "baseHref" to deal with a file, take the root of the file (and not take the file for a folder).

For information, I use a baseHref to a file, because I use the system of route of Angular with the hash and that the url https://storage.googleapis.com/dev-web-xxxxxx-xxxxxx/ does not point towards my file index.html. As the project is hosted on a Google Cloud Storage, when we update the application (CTRL+F5, ...) with a url of this type ...-xxxxxx/#/user/login, I end up with a 404 error (because the url in ...-xxxxxx/ does not point to the file index.html). To solve this problem, I force Angular to keep the index.html in the URL (eg: ...-xxxxxx/index.html#/user/login), through baseHref with the index.html in it.

For now, I make the corrections of the url in the file ngsw.json manually, so that the cache of the application works...

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.