如何将 Angular App 部署到 Heroku 并保留为 PWA?

Question

总结问题：

我正在尝试将我的 Angular 6 应用程序部署到 Heroku 并保留渐进式 Web 应用程序功能。在 Heroku 上的最终构建没有服务工作者。

背景：

我在 Angular 6 中构建了一个本地体育商店应用程序。我正在关注Adam Freeman的Pro Angular 6，第3版一书，并在第9章末尾将该应用程序大致推向了阶段。

第 9 章的 GitHub 存储库：体育商店

为了将其创建为PWA，我已经运行了

ng add @angular/pwa

我编辑了生成的ngsw-config.json，使其与下面的代码所示相匹配

在此处关注博客文章 我已经完成了以下步骤：

1. npm install --save express path
2. 编辑package.json将@angular/cli、@angular/compiler-cli、typescript和@angular-devkit/build-angular": "~0.6.8"从开发依赖项移动到依赖项
3. 创建server.js
4. 创建Procfile与web: node server.js

heroku create sportsstoredemo
git add .
git commit -m "setup'
git push heroku master

这将部署在 heroku 上，但不包括服务辅助角色。我迷失了我能做什么，因为我几乎不明白我上面采取的步骤。

有人可以采用 GitHub 存储库并建议在运行服务工作者的情况下在 Heroku 上采取哪些步骤或指出我出错的地方吗？

法典

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);

描述预期和实际结果

预期 - 与代码相同的应用程序 体育商店 但在 Heroku 上作为 PWA 运行

实际 - 仅在Heroku上构建时才使用Angular App。在本地，我可以将其作为PWA运行。

Answer 1

答案可以在以下位置找到： Angular 6 PWA，节点不工作

有人可以将我的问题标记为重复吗？

在main.ts以下作品中：

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

我还必须将package.json从"build": "ng build"编辑为"build": "ng build --prod"

下面将是我的更新帖子，直到我找到上述内容，我会把它留在这里，以防它对任何人都有用。

橡皮躲避

我还没有找到答案，所以我到目前为止发布了我的进度，试图以任何人都可以遵循的方式解决我的问题。

第 1 步：让 Angular 6 应用程序作为 PWA 在本地运行

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

因此，根据角度文档>最后一个命令是通过添加ServiceWorkerModule并将ngsw-worker.js注册到app.component.tsOk 来添加@angular/service-worker包

运行以下命令将生成项目并创建包含ngsw-worker.js的/dist文件夹

ng build --prod

运行以下内容意味着我可以在本地将其作为 PWA 运行。

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

不太相关，但打开单独的cmd并运行以下内容会用数据填充应用程序。

npm run json

第 2 步：让 Angular 6 应用程序在 Heroku 上运行

因此编辑package.json将@angular/cli、@angular/compiler-cli、typescript和@angular-devkit/build-angular": "~0.6.8"从 devDependencies 移动到> 到 依赖项

这篇博文建议"postinstall": "ng build --aot --prod"而不是"ng build --prod"。让我们试试看。

跑

npm install express path --save

添加了与 OP 代码相同的server.js。我使用其他人博客文章中的./dist>遇到了一些问题，但将其改回/dist

编辑为在package.json中"start": "node server.js"。好吧，这至少是不同的

部署到heroku(大致沿着

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