Installing angular pwa dosen't work

[ahmedhmf]

Please provide the environment you discovered this bug in.

local build
with angular v17.0.0 and analogjs v0.2.0

Which area/package is the issue in?

Don't know / other

Description

After installing @angular/pwa and adding it to the project files are created correctly as per the angular documentation. when building and trying to start the app. we get an error
Service worker registration failed with: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/ngsw-worker.js'): The script has an unsupported MIME type ('text/html').
After investigating the problem I thought it was just wrong configuration path for the path of the server worker.

Please provide the exception or error you saw

Service worker registration failed with: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/ngsw-worker.js'): The script has an unsupported MIME type ('text/html').

Other information

After Investigating for sometime. As you know in our sources we have only the configuration for the service worker and angular generates the js file when building. Maybe my interpretation of this problem will help and it is that the service worker js file should be generated and added to the public folder and as angular don't have a public folder it is not generated there and I think that is the problem. The problem was found first in Angular Hub project https://github.com/angular-sanctuary/angular-hub if this will hel to investigate. I am also available to support if any help is needed :D

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Thanks @ahmedhmf. You're correct that most of the files are set up correctly by running ng add @angular/pwa, except the index.html, the manifest, and the icon assets. The build does happen inside the Angular CLI build process, but the function that does it is self-contained.

I created a sample repo that has the service worker files set up, builds the service worker through an inline vite plugin in the vite.config.ts. I did separate commits for the changes.

https://github.com/brandonroberts/analog-service-worker

We can build this support into the plugin itself.

[goetzrobin]

I wonder if we can use the nx ng-add generator with some custom options & the inline plugin you created for this @brandonroberts to support this through the AnalogJs plugin

[brandonroberts]

Yea, I think it might be better to create our own pwa generator that wraps the Angular one, moves the files to their intended place, and add a serviceWorker option to the Analog plugin to trigger the service worker build after the client app build.

[ciekawy]

any known workaround or updates on this?

[brandonroberts]

any known workaround or updates on this?

Yes, you can see the changes in the commits in this repo

https://github.com/brandonroberts/analog-service-worker