Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PWA] ngsw.json assetGroups are blank in Angular 12 (cause 504 error) #20894

Closed
redplane opened this issue May 18, 2021 · 15 comments · Fixed by #20897
Closed

[PWA] ngsw.json assetGroups are blank in Angular 12 (cause 504 error) #20894

redplane opened this issue May 18, 2021 · 15 comments · Fixed by #20897

Comments

@redplane
Copy link

Bug Report

Affected Package

The issue is caused by package @angular/....

"@angular/service-worker": "^12.0.0"

Is this a regression?

  • (Haven't tried with ealier version)

Description

  1. Follow instruction in Angular official tutorial about PWA
  2. Host application using http-server (mentioned in the above tutorial)
  3. Set chrome to ONLINE and load the page
  4. Set chrome to OFFLINE and press F5 to reload the loaded page

Minimal Reproduction

Exception or Error

image

Your Environment

Angular Version:


Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 6.14.9
OS: win32 x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?
What I notice is:

  • In the generated ngsw.json, the urls in both app and assets section inside assetGroups are all blank (see the below image)

image

  • When I filled values into urls as the below image, the PWA worked perfectly. App can work in Offline mode

image

@hamidkhandatamagnetics
Copy link

I am also having exact this same issue with service worker.

@Kashif-datamagnetics
Copy link

Experiencing same issue, just tried with a band new application and issue is producing .This is high priory issue and must be fixed quickly. Many thanks

@gkalpak gkalpak self-assigned this May 21, 2021
@ghazanfardmt
Copy link

Its need an urgent action to fix. Facing same issue with NG-12.

@AfzalDMT
Copy link

Facing the same issue and looking for solution as soon as possible. Thanks

@nazim-hussain
Copy link

I am facing this issue with service worker, can you please look into it urgently, Thank you

@waqas780
Copy link

waqas780 commented May 21, 2021

I am facing this issue with a service worker, please fix it on urgently base, many Thanks

@kashifsohail
Copy link

i am also facing same issue, need solution urgently

@SohailLatif
Copy link

SohailLatif commented May 21, 2021

I am same issue, just tried with a band new application and issue is producing .Can you please look into it urgently,
Thank you

@usmanghani-DMT
Copy link

Its need an urgent action to fix. Facing same issue

@raosafdar
Copy link

Facing Same Issue
desperately need Solution
Thank You

@aqeel-dmt
Copy link

yes exactly facing same issue, need urgently solution on it. thanks.

@mtariqdmt
Copy link

Facing same issue and looking for it urgent solution.

@gkalpak gkalpak transferred this issue from angular/angular May 21, 2021
@gkalpak
Copy link
Member

gkalpak commented May 21, 2021

I can confirm this happens in a new CLI app with v12.0.1. It sounds like something has changed in the CLI that prevents the SW config script to detect any dist files. (More investigation is needed to determine the exact cause.)

The minimal reproduction is:

ng new test-app --defaults
cd test-app
ng add @angular/pwa
ng build
// Observe that the `assetGroups > urls` arrays are empty.

As a temporary work-around, you can create an npm script that manually runs the SW configuration script and call it after you build for production. The script will look something like ngsw-config path/to/dist/ path/to/ngsw-config.json.

For example, for the minimal reproduction shown above, it would look like:

// package.json
// ...
"scripts": {
  // ...
  "build-sw": "ngsw-config dist/test-app ngsw-config.json",

@ngbot ngbot bot modified the milestone: needsTriage May 21, 2021
@ngbot ngbot bot modified the milestones: needsTriage, Backlog May 21, 2021
gkalpak added a commit to gkalpak/angular-cli that referenced this issue May 21, 2021
…config on Windows

Since angular#20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes it by using platform-specific `path.*` methods and
manually normalizng the path separators before returning the results.

Fixes angular#20894
gkalpak added a commit to gkalpak/angular-cli that referenced this issue May 21, 2021
…config on Windows

Since angular#20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.

Fixes angular#20894
@gkalpak
Copy link
Member

gkalpak commented May 21, 2021

BTW, this issue only affects Windows 😟
A fix is in progress here: #20897

gkalpak added a commit to gkalpak/angular-cli that referenced this issue May 22, 2021
…config on Windows

Since angular#20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.

Fixes angular#20894
clydin pushed a commit that referenced this issue May 24, 2021
…config on Windows

Since #20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.

Fixes #20894
clydin pushed a commit that referenced this issue May 24, 2021
…config on Windows

Since #20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.

Fixes #20894

(cherry picked from commit d1953bf)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 24, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.