How do I deploy Angular App to Heroku and keep as PWA? [duplicate]

Answer 1

The answer can be found at Angular 6 PWA with Node not working

Can someone mark my question as duplicate?

In main.ts the following works:-

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));

I had to also edit my package.json from "build": "ng build" to "build": "ng build --prod"

Below was going to be my update post until I found the above, I'll leave it here incase it's useful to anyone.

Rubber Ducking

I've had not found an answer to this so I've posted my progress so far in an attempt to Rubber Duck my problem in such a way anyone can follow.

Step 1: Get Angular 6 App running locally as PWA

git clone https://github.com/Apress/pro-angular-6
cd pro-angular-6
cd "09 - SportsStore - Admin"
cd SportsStore
ng add @angular/pwa

So per the angular docs >this last command is adding the @angular/service-worker package by adding the ServiceWorkerModule and registering ngsw-worker.js to app.component.ts Ok

Running the following builds the project and creates the /dist folder containing ngsw-worker.js

ng build --prod

Running the following means I can locally get this running as a PWA.

http-server -p 8080 -c-1 dist/SportsStore

Not too relevant but opening separate cmd and running the following populates the app with data.

npm run json

Step 2: Get Angular 6 App running on Heroku

So edited package.json moving @angular/cli, @angular/compiler-cli, typescript and @angular-devkit/build-angular": "~0.6.8" from devDependencies over > to dependencies

This blog post suggest "postinstall": "ng build --aot --prod" rather than "ng build --prod". Let's try that.

Ran

npm install express path --save

Added server.js with same code as OP. I had some issues with this using a ./dist > from someone else blog post but changed this back to /dist

Edited to "start": "node server.js" in package.json. Well that's different at least

Deploy to heroku (roughly along lines of)

heroku login
git init
git add -A
git commit -m "test"
heroku git:remote -a APP_NAME
git push heroku master