问题
Summarize the problem:
I'm trying to deploy my Angular 6 App to Heroku and keep the progressive web app features. There's no service worker for the end build on Heroku.
Background:
I've built a local Sports Store app in Angular 6. I'm following the book Pro Angular 6, 3rd Edition. by Adam Freeman and have gotten the app to roughly the stage at the end of chapter 9.
GitHub repository of chapter 9: SportsStore
To create this as a PWA I've run
ng add @angular/pwa
I edited the generated ngsw-config.json so it matches this shown below in Code
Following the blog post here I've done the following steps:
npm install --save express path- edited
package.jsonmoving@angular/cli,@angular/compiler-cli,typescriptand@angular-devkit/build-angular": "~0.6.8"from devDependencies over to dependencies - Created
server.js - Created
Procfilewithweb: node server.js
heroku create sportsstoredemo
git add .
git commit -m "setup'
git push heroku master
This deploys on heroku but does not include the service worker. I'm lost what I can do as I barely understand the steps I've taken above.
Can someone take the GitHub repo and advise what steps will get this on Heroku with service worker running or point out where I have gone wrong?
Code
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/font/*"
]
}
}],
"dataGroups": [
{
"name": "api-product",
"urls": ["/api/products"],
"cacheConfig" : {
"maxSize": 100,
"maxAge": "5d"
}
}],
"navigationUrls": [
"/**"
]
}package.json
{
"name": "sports-store",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"json": "json-server data.js -p 3500 -m authMiddleware.js",
"postinstall": "ng build --prod"
},
"engines": {
"node": "10.15.3",
"npm": "6.4.1"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.6",
"@angular/compiler-cli": "~7.2.0",
"typescript": "~3.2.2",
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/pwa": "^0.12.4",
"@angular/router": "~7.2.0",
"@angular/service-worker": "~7.2.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"express": "^4.16.4",
"font-awesome": "^4.7.0",
"path": "^0.12.7",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.14.2",
"jsonwebtoken": "^8.5.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0"
}
}server.js
const path = require('path');
const express = require('express');
const app = express();
// Serve static files
app.use(express.static(__dirname + '/dist/MY_APP_NAME'));
// Send all requests to index.html
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
});
// default Heroku port
app.listen(process.env.PORT || 5000);Describe expected and actual results
Expected - same app as code SportsStore but running as PWA on Heroku
Actual - just Angular App only when built on Heroku. Locally I can get this running as PWA.
回答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/pwaSo per the angular docs >this last command is adding the
@angular/service-workerpackage by adding theServiceWorkerModuleand registeringngsw-worker.jstoapp.component.tsOkRunning the following builds the project and creates the
/distfolder containingngsw-worker.jsng build --prodRunning the following means I can locally get this running as a PWA.
http-server -p 8080 -c-1 dist/SportsStoreNot too relevant but opening separate cmd and running the following populates the app with data.
npm run jsonStep 2: Get Angular 6 App running on Heroku
So edited
package.jsonmoving@angular/cli,@angular/compiler-cli,typescriptand@angular-devkit/build-angular": "~0.6.8"from devDependencies over > to dependenciesThis blog post suggest
"postinstall": "ng build --aot --prod"rather than"ng build --prod". Let's try that.Ran
npm install express path --saveAdded
server.jswith same code as OP. I had some issues with this using a./dist> from someone else blog post but changed this back to/distEdited to
"start": "node server.js"in package.json. Well that's different at leastDeploy 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
来源：https://stackoverflow.com/questions/55362319/how-do-i-deploy-angular-app-to-heroku-and-keep-as-pwa