Angular-cli: Service worker register don't fetch the ngsw.json correctly

[jvitor83]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular CLI: 1.6.0-beta.0
Node: 8.9.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 1.6.0-beta.0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0-beta.0
@schematics/angular: 0.1.3
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

ng new project --service-worker
cd project
ng build --prod --base-href=/project/

replace the line 16 of app.module.ts to:
environment.production ? ServiceWorkerModule.register('/project/ngsw-worker.js') : []
_(this is another bug https://github.com/angular/angular-cli/issues/8515)_

then

Publish the dist folder to a web server with a base url /project/
Ex: http://localhost/project/

The log given by the failure.

At console:

Uncaught (in promise) Error: Manifest fetch failed!
    at Driver.fetchLatestManifest (ngsw-worker.js:2147)
    at <anonymous>
fetchLatestManifest @ ngsw-worker.js:2147
Promise rejected (async)
onMessage @ ngsw-worker.js:1814
Driver.scope.addEventListener @ ngsw-worker.js:1755

At network of chrome devtools it gives 404 since can't found http://localhost/ngsw.json?ngsw-cache-bust=0.32248277017838034.

Desired functionality.

The right address of fetch should be http://localhost/project/ngsw.json?ngsw-cache-bust=0.32248277017838034

Mention any other details that might be useful.

At line 2141 of ngsw-worker.js file, it should consider the base-href.

const res = await this.safeFetch(this.adapter.newRequest('/ngsw.json?ngsw-cache-bust=' + Math.random()));

[jvitor83]

Just to link the related bug:
https://github.com/angular/angular-cli/issues/8515

[svi3c]

I guess this is an issue in @angular/service-worker ... At least the ngsw-worker.js file is delivered from that npm package.

[hansl]

How is this different then #8515?

[jvitor83]

@hansl
Even if you fix the register line like adding manually the base-path (this is the #8515 bug):

environment.production ? ServiceWorkerModule.register('/project/ngsw-worker.js') : []

the error appear at runtime on ngsw-worker.js.

So, @svi3c is right. Is a problem at ngsw-worker.js of @angular/service-worker. But the feature comes from the CLI with base-path.

• This bug is related to the runtime problem when using base-path (@angular/service-worker)
• The #8515 is related to the register (generated by cli) which not consider base-path

I don't know if is needed 2 different issues, but feel free to close one if want to.

[manrueda]

When the service worker try to load the manifest use an absolute path.

const res = await this.safeFetch(this.adapter.newRequest('/ngsw.json?ngsw-cache-bust=' + Math.random()));

Changing that to a relative path (will be relative to the service worker path) do the work. The browser will do all the path resolution work.

const res = await this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));

UPDATE:
It was already fixed here: https://github.com/angular/angular/commit/f582620d5b0787064f17a1521f55142d090845f0

[dereklin]

I am getting 401 Unauthorized status code back. Any ideas how to work around that?:

   async fetchLatestManifest() {
        const res = await this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));
        if (!res.ok) {
            if (res.status === 404) {
                await this.deleteAllCaches();
                this.scope.registration.unregister();
            }
            throw new Error('Manifest fetch failed!');
        }
        this.lastUpdateCheck = this.adapter.time;
        return res.json();
    }

[rahulsahay19]

I am also getting the same error. Problem is, when I am running locally, I don't have any problem. But, when the same site is getting deployed on azure, its creating problem like shown below.

Not sure, what I am doing wrong. At the same time, manifest is loading fine.

Kindly advice if I am doing anything wrong?

Thanks,
Rahul

[Vinutha-BK]

Hi , I followed the steps from below link
https://medium.com/@nsmirnova/creating-pwa-with-angular-5-part-2-progressifying-the-application-449e3a706129.
Its working fine locally when i build [ng build --prod] and run application [http-server -p 4200]

but I have loaded project to git and using azure for hosting with jenkins build
npm install
ng build --prod

but getting below error:
Uncaught (in promise) Error: Manifest fetch failed!
at Driver.fetchLatestManifest (ngsw-worker.js:2187)
at

And in the local application screen

Azure hosted application is like

[aonerd]

Hi,
Similar to Vinutha-BK I am also deploying to Azure and getting the exact same problem.
Everything works fine locally but once deployed I get the same error message.
Any ideas?
Thanks

[aonerd]

This solved it:
https://blogs.msdn.microsoft.com/africaapps/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website/

[Vinutha-BK]

Yes @aonerd.
+1
Path to add the web config is https://(projectsitename).scm.azurewebsites.net/DebugConsole

Add .scm to your website address,which navigates to settings ,if web.config is already exist add the content or create new file(Web.config) in the below folder path.
Site/wwwroot

[rahulsahay19]

@Vinutha-BK Hi, can you let me know, what version of service worker you are using. Actually, I am getting this error in local as well.

ngsw-worker.js:2187 Uncaught (in promise) Error: Manifest fetch failed!
at Driver.fetchLatestManifest (ngsw-worker.js:2187)

Thanks,
Rahul

[rahulsahay19]

Oh ,my bad I was not running ngsw-config command on top of build hence service worker was not running. Now, its fine. BTW, I have used "manifest.webmanifest" just to ignore any server side web.config changes to allow json file to get downloaded

[willy-juisan]

I also facing the same issue. Anybody knows how to fix this issue? Mine was deployed on tomcat 8 server.

[gkalpak]

This has been fixed with angular/angular@f582620. The fix is available since 5.1.x.

[GarySegler]

Not true. This is still not fixed. I'm using 1.7.4 and 5.2 and this is still happening when using IIS as the host.

[gkalpak]

Are you saying this only happens with IIS? (Sounds like a different issue.)

[inthegarage]

@gkalpak I have a similar issue with spring-boot, seems to give 401 for some reason. Appears to be a very similar issue.

Uncaught (in promise) Error: Manifest fetch failed! (status: 401)
    at Driver.<anonymous> (ngsw-worker.js:2294)
    at Generator.next (<anonymous>)
    at fulfilled (ngsw-worker.js:1752)

That is the newer line in the same file. I have allowed this file in the spring-boot config. Under normal circumstances it fetches it fine, testing under Lighthouse it fails.

[GarySegler]

While not resolved, I figured out that if I used Windows Auth in IIS, I would get this 401 error, which makes sense. So only having Anonymous turned on works.

Is there a way to have the service worker add { useCredentials: true} in the header when using fetch?

[inthegarage]

I'm not entirely sure what the issue is, when I request the manifest from the address bar, it loads fine, however when it is requested by the Request interface (that's what the adapter uses) it gives me a 401. I'm guessing it's not supplying maybe the XSRF header or a similar issue.

As I have a very fixed static manifest, I've hard coded that in the worker's return, irrespective of the error code. A huge hack, but it's got me past the issue.

[gkalpak]

This sounds like a different issue (401 vs 404). It is related to authentication, since the current @angular/service-worker can't handle that. There is an open issue for that (angular/angular#23605) and more info on angular/angular#20865.

[inthegarage]

@gkalpak Thanks for the clarification, yes this is a 401 issue. I see in this ticket that there were mentions of 401s, hence my input.

[riserrad]

It seems that this issue is back. Well, my tolling versions:

Angular CLI: 6.2.0-beta.2
Node: 8.11.1
OS: win32 x64
Angular: 6.1.3
@angular/cli 6.2.0-beta.2
@angular/pwa 0.8.0-beta.2
@schematics/angular 0.8.0-beta.2
@schematics/update 0.8.0-beta.2

The solution @aonerd provided worked for me. It seems more an issue with Azure App Service than with Angular itself.

Does anyone have ideas? For example, if deploying the Angular App via vscode/devenv to App Service, should vscode/devenv suggest the dev to add a Web.Config with these static files configuration? Should App Service serve json files as static files by default?

[angular-automatic-lock-bot[bot]]

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._}