angular / angular/angular-cli

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

Đang mở
#12,853 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @angular-devkit/build-angular freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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`:
```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`:
```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:
```json
{
"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...

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Tái hiện bản build PWA bằng cách sử dụng các giá trị baseHref trong angular.json và kiểm tra ngsw.json được tạo ra. Bắt đầu với đường dẫn build tạo các URL của service worker; hoàn thành khi một baseHref có giá trị là tệp vẫn giữ index.html làm index, trong khi các URL của asset sử dụng đường dẫn chứa tệp đó mà không có phân đoạn /index.html/ bị lặp.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
build-system, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.