GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing github.com — [BUG][PWA] Url error in the "ngsw.json" file with a "baseHref" pointing to a file (eg: "/index.html") · Issue #12853 · angular/angular-cli

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

New issue

Copy link

New issue

Copy link

Open

Bug

Open

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

Bug

Copy link

Labels

area: @angular-devkit/build-angularfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarelyseverity3: brokentype: bug/fix

Milestone

Backlog

Description

sitexw

opened

on Nov 2, 2018

Issue body actions

Bug Report or Feature Request

- [X] bug report -> please search issues before submitting
- [ ] feature request

From here: angular/angular#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...

Activity

sitexw
changed the title ~~[-][BUG] Url error in the "ngsw.json" file with a "baseHref" pointing to a file (eg: "/index.html")[/-]~~ [+][BUG][PWA] Url error in the "ngsw.json" file with a "baseHref" pointing to a file (eg: "/index.html")[/+] on Nov 2, 2018
alan-agius4
added
freq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarely

severity3: broken

area: @angular/pwa
on Nov 2, 2018
ngbot
added this to the needsTriage milestone on Nov 2, 2018
alan-agius4
added
type: bug/fix
on Nov 2, 2018
ngbot
modified the milestones: needsTriage, Backlog on Nov 2, 2018
alan-agius4 commented on Dec 5, 2018
alan-agius4
on Dec 5, 2018
Collaborator
More actions
Hi, thanks for reporting this.

Can you explain why your Google Cloud Storage bucket is not configured to point to the index.html?

Most likely setting the baseHref to a file, will have other repercussions when using lazy loading, css assets if absolute paths are used etc.
gkalpak commented on Dec 5, 2018
gkalpak
on Dec 5, 2018
Member
More actions
@alan-agius4, what other repercussions do you have in mind? Using a file as baseHref is valid.
IMO, cli should suport that and treat it the same way as it will be treated in the browser (i.e. ignore the file part if it wants to combine it with a relative path).
alan-agius4 commented on Dec 6, 2018
alan-agius4
on Dec 6, 2018
Collaborator
More actions
@gkalpak, I totally agree!

My point was that when baseHref is a file it is not being set properly not only in service worker, but applies to a lot of other user cases. Such as lazy loading, absolute css resources etc...

So setting the baseHref to a file at the moment will break not only the service worker but other functionality (depending on what functionality you are using).

And I agree that it should be addressed 😀
dgp1130
added
triage #1
on May 26, 2020
alan-agius4
removed
triage #1
on Jun 24, 2022
alan-agius4
added
area: @angular-devkit/build-angular
and removed
area: @angular/pwa
on Sep 6, 2022

Metadata

Assignees

No one assigned

Labels

area: @angular-devkit/build-angularfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarelyseverity3: brokentype: bug/fix

Type

Bug

Projects

No projects

Milestone

BacklogNo due date

Relationships

None yet

Development

No branches or pull requests

Issue actions

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

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

Description

Bug Report or Feature Request

Command

Versions

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

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

Activity

alan-agius4 commented on Dec 5, 2018

gkalpak commented on Dec 5, 2018

alan-agius4 commented on Dec 6, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions