In https://github.com/angular/angular-cli/issues/9869 and stackoverflow and elsewhere people are wringing their hands about ng serve
and service workers. I was also cursing, losing the incremental compile, the debugging, etc. So much efficiency loss.
I researched. There are good reasons to use only https for service workers. But, there is an escape clause, localhost. Why can’t ng serve use this?
Some more research, it appears the service worker is the same file each time (its not compiled, it comes from npmjs).
So methinks, the answer is probably yet-another-proxy. And, it works.
So, what I did:
ng build --prod
cd dist/<project>
python3 -mhttp.server
And just let that sit. In another window, I created a proxy.conf.json in the project root. I then ran the ng serve as below, and, huzzah, it worked.
ng serve --prod --disable-host-check --proxy-config proxy.conf.json --verbose
The proxy.conf.json file:
{
"/ngsw*": {
"target": "http://localhost:8000/",
"secure": false,
"logLevel": "debug"
},
"/manifest.webmanifest": {
"target": "http://localhost:8000",
"secure": false
},
"/worker-basic.min.js": {
"target": "http://localhost:8000",
"secure": false
},
"/safety-worker.js": {
"target": "http://localhost:8000",
"secure": false
}
}
Note you can also use ‘ngrok‘ (ngrok http 4200 -host-header=”localhost:4200″) to lie to the browser and have it think this is https.
ng serve --prod --optimization=false --progress=true --disable-host-check --proxy-config proxy.conf.json --sourceMap=true --live-reload --watch
might also be a good approach to emulate debug mode.
You’re welcome. I’m sure there are all kinds of limitations here, but, well, progress!
Leave a Reply