René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[BUG][PWA] Url error in the \"ngsw.json\" file with a \"baseHref\" pointing to a file (eg: \"/index.html\")","articleBody":"### Bug Report or Feature Request\r\n```\r\n- [X] bug report -\u003e please search issues before submitting\r\n- [ ] feature request\r\n```\r\nFrom here: https://github.com/angular/angular/issues/26917\r\n\r\n### Command\r\n```\r\n- [X] build\r\n```\r\n\r\n### Versions\r\n```\r\nAngular CLI: 7.0.4\r\nNode: 10.8.0 (npm: 6.3.0)\r\nOS: win32 x64\r\nAngular: 7.0.2\r\n... animations, cdk, common, compiler, compiler-cli, core, forms\r\n... http, language-service, material, platform-browser\r\n... platform-browser-dynamic, router, service-worker\r\n\r\nPackage                           Version\r\n-----------------------------------------------------------\r\n@angular-devkit/architect         0.10.4\r\n@angular-devkit/build-angular     0.10.4\r\n@angular-devkit/build-optimizer   0.10.4\r\n@angular-devkit/build-webpack     0.10.4\r\n@angular-devkit/core              7.0.4\r\n@angular-devkit/schematics        7.0.4\r\n@angular/cli                      7.0.4\r\n@angular/pwa                      0.10.4\r\n@ngtools/webpack                  7.0.4\r\n@schematics/angular               7.0.4\r\n@schematics/update                0.10.4\r\nrxjs                              6.3.3\r\ntypescript                        3.1.6\r\nwebpack                           4.19.1\r\n```\r\n\r\n\r\n## Current behavior\r\nI have a problem with the file `ngsw.json` (`dist/xxx/ngsw.json`), when I build my application.\r\nHere is the configuration of my file `angular.json`:\r\n```json\r\n{\r\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\r\n  \"version\": 1,\r\n  \"newProjectRoot\": \"projects\",\r\n  \"projects\": {\r\n    \"xxxxxx-xxxxxx-web\": {\r\n      ...\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"builder\": \"@angular-devkit/build-angular:browser\",\r\n          \"options\": {\r\n            \"baseHref\": \"/index.html\",   \u003c-- baseHref with path to a file\r\n            ...\r\n          },\r\n          \"configurations\": {\r\n            \"develop\": {\r\n              ...\r\n              \"baseHref\": \"/dev-web-xxxxxx-xxxxxx/index.html\",   \u003c-- baseHref with path to a file\r\n              \"fileReplacements\": [\r\n                {\r\n                  \"replace\": \"src/environments/environment.ts\",\r\n                  \"with\": \"src/environments/environment.develop.ts\"\r\n                }\r\n              ],\r\n              \"optimization\": true,\r\n              \"outputHashing\": \"all\",\r\n              \"sourceMap\": true,\r\n              \"extractCss\": true,\r\n              \"namedChunks\": false,\r\n              \"aot\": true,\r\n              \"extractLicenses\": true,\r\n              \"vendorChunk\": false,\r\n              \"buildOptimizer\": true,\r\n              \"serviceWorker\": true\r\n            }\r\n            ...\r\n```\r\nAs you can see, my `baseHref` points to a file (`index.html`). And when I compile, here is the result of the file `ngsw.json`:\r\n```json\r\n{\r\n  \"configVersion\": 1,\r\n  \"index\": \"/dev-web-xxxxxx-xxxxxx/index.html/index.html\",\r\n  \"assetGroups\": [                 ^^^^^^^^^^\r\n    {\r\n      \"name\": \"app\",\r\n      \"installMode\": \"prefetch\",\r\n      \"updateMode\": \"prefetch\",\r\n      \"urls\": [                 vvvvvvvvvv\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/4.459d2c031076fa54578c.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/5.b0a92526f07730e41004.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/index.html\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/main.284d15247a9766d625e1.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/polyfills.f8bea440aac573c30541.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/runtime.e04cbf91ceee4f9b3494.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/styles.380a38f67b77a997829f.css\"\r\n      ],                        ^^^^^^^^^^\r\n      \"patterns\": []\r\n    },\r\n    {\r\n      \"name\": \"assets\",\r\n      \"installMode\": \"lazy\",\r\n      \"updateMode\": \"prefetch\",\r\n      \"urls\": [                 vvvvvvvvvv\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/assets/icons/icon-128x128.png\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html/assets/icons/icon-144x144.png\",\r\n        ...                     ^^^^^^^^^^\r\n```\r\nAs 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...\r\n\r\n\r\n## Expected behavior\r\n\u003c!-- Describe what the desired behavior would be. --\u003e\r\nI think the file should have looked like this:\r\n```json\r\n{\r\n  \"configVersion\": 1,\r\n  \"index\": \"/dev-web-xxxxxx-xxxxxx/index.html\",\r\n  \"assetGroups\": [\r\n    {\r\n      \"name\": \"app\",\r\n      \"installMode\": \"prefetch\",\r\n      \"updateMode\": \"prefetch\",\r\n      \"urls\": [\r\n        \"/dev-web-xxxxxx-xxxxxx/4.459d2c031076fa54578c.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/5.b0a92526f07730e41004.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/index.html\",\r\n        \"/dev-web-xxxxxx-xxxxxx/main.284d15247a9766d625e1.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/polyfills.f8bea440aac573c30541.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/runtime.e04cbf91ceee4f9b3494.js\",\r\n        \"/dev-web-xxxxxx-xxxxxx/styles.380a38f67b77a997829f.css\"\r\n      ],\r\n      \"patterns\": []\r\n    },\r\n    {\r\n      \"name\": \"assets\",\r\n      \"installMode\": \"lazy\",\r\n      \"updateMode\": \"prefetch\",\r\n      \"urls\": [\r\n        \"/dev-web-xxxxxx-xxxxxx/assets/icons/icon-128x128.png\",\r\n        \"/dev-web-xxxxxx-xxxxxx/assets/icons/icon-144x144.png\",\r\n        ...\r\n```\r\n\r\n\r\n## Minimal reproduction of the problem with instructions\r\n\u003c!--\r\nFor bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via\r\nhttps://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).\r\n--\u003e\r\nYou 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.\r\n\r\n## What is the motivation / use case for changing the behavior?\r\n\u003c!-- Describe the motivation or the concrete use case. --\u003e\r\nI 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).\r\n\r\nFor 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.\r\n\r\nFor now, I make the corrections of the url in the file `ngsw.json` manually, so that the cache of the application works...\r\n","author":{"url":"https://github.com/sitexw","@type":"Person","name":"sitexw"},"datePublished":"2018-11-02T11:33:56.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3},"url":"https://github.com/12853/angular-cli/issues/12853"}