I tried all the solutions on the internet on how to add PWA to an Angular project, but still in Chrome Dev Tools, there are no service worker registered.
I did run ng add @angular/pwa
, with ng build --prod
and http-server -o
and still no service worker registered. It also does not add a @angular/service-worker package and also no Manifest.json file like it should as indicated all over the internet.
I also tried creating a new project with PWA pre-installed with ng new myProject --service-worker
, also not working.
I even tried registering the service working like below:
if ( 'serviceWorker' in navigator ) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); });
A side note: When I run ng add @angular/pwa
I get a message "Path '/ngsw-config.json' already exist", so I found out that file is under @schematics package. The script only adds a @angular/pwa package, which does not corrolate with the Angular PWA docs.
Here is my environment :
Angular 6.1.2
Angular CLI: 6.1.3
Node 8.11.3
NPM 5.6.0
What do I need to do to get a plain PWA Angular project?
It is the new version of @angular/pwa
package that has a few bugs. So running ng add @angular/pwa@0.6.8
worked perfectly for me.
To test the service worker locally: If you have Firebase added to your project (hosting), you can run ng build --prod
and then firebase serve
. When you don't have Firebase, you can run ng build --prod
, cd into the dist folder (depending on your config) and then run http-server -o
. If you don't have http-server
module, install it by running npm i -g http-server
Try using the Angular Console: https://angularconsole.com/
It abstracts away many of the need to know logic that the cli has.
It's in beta but it should help you create the base for your PWA. Give it a try it's build from the Nrwl Team that also builds Nx which is an enhancement to the angular/cli using schematics
I had the same issue. The problem was than this command: ng add @angular/pwa
didn't add module @angular/pwa to package.json dependencies.
I decided it so.
First I run ng add @angular/pwa Then I did: npm install @angular/pwa
And it all works!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.