总结一下问题:

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

背景:

我已经在 Angular 6 中构建了一个本地 Sports Store 应用程序。我正在关注这本书Pro Angular 6，第三版。作者：亚当·弗里曼并已使应用程序大致进入第 9 章末尾的阶段。

第 9 章的 GitHub 存储库：体育用品商店 https://github.com/Apress/pro-angular-6/tree/master/09%20-%20SportsStore%20-%20Admin/SportsStore

为了将其创建为我运行的 PWA

ng add @angular/pwa

我编辑了生成的ngsw-config.json所以它匹配this https://github.com/Apress/pro-angular-6/blob/master/10%20-%20SportsStore%20-%20PWA%20and%20Deployment/SportsStore/ngsw-config.json如下所示Code

继博文之后here https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147我已完成以下步骤：

1. npm install --save express path
2. edited package.json moving @angular/cli, @angular/compiler-cli, typescript and @angular-devkit/build-angular": "~0.6.8"从 devDependency 到 dependency
3. Created server.js
4. Created Procfile with web: node server.js

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

这部署在 Heroku 上，但不包括 Service Worker。我失去了我能做什么，因为我几乎不明白我上面采取的步骤。

有人可以获取 GitHub 存储库并建议在运行 Service Worker 的情况下在 Heroku 上执行哪些步骤，或者指出我哪里出错了？

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

描述预期和实际结果

预期 - 与代码相同的应用程序体育用品商店 https://github.com/Apress/pro-angular-6/tree/master/09%20-%20SportsStore%20-%20Admin/SportsStore但在 Heroku 上作为 PWA 运行

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

答案可以在以下位置找到Angular 6 PWA 与 Node 不工作 https://stackoverflow.com/questions/51089478/angular-6-pwa-with-node-not-working

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

In 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 from "build": "ng build" to "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

所以根据角度文档 https://angular.io/guide/service-worker-getting-started>最后一个命令是添加@angular/service-worker包通过添加ServiceWorkerModule并注册ngsw-worker.js to app.component.ts Ok

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

ng build --prod

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

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

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

npm run json

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

如此编辑package.json moving @angular/cli, @angular/compiler-cli, typescript and @angular-devkit/build-angular": "~0.6.8"从 devDependencies 到 > 到依赖项

This https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147博客文章建议"postinstall": "ng build --aot --prod"而不是"ng build --prod"。让我们试试吧。

Ran

npm install express path --save

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

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

部署到heroku（大致沿着线）

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