橡皮鸭

Question

总结问题：

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

背景：

我已经在Angular 6中构建了本地Sports Store应用。我正在关注 Pro Angular 6，第三版。并由Adam Freeman 编写，并将该应用程序大致推到了第9章末尾的阶段。

第9章的GitHub存储库：SportsStore

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

ng add @angular/pwa

我编辑了生成的ngsw-config.json，使其与以下 Code

中显示的this匹配

在博客文章here之后我已完成以下步骤：

npm install --save express path
编辑package.json，将@angular/cli，@angular/compiler-cli，typescript和@angular-devkit/build-angular": "~0.6.8"从devDependencies移到依赖关系
创建了server.js
使用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);

描述预期和实际结果

预期-与代码SportsStore相同的应用程序，但在Heroku上以PWA身份运行

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

Answer 1

可以在以下位置找到答案 Angular 6 PWA with Node not working

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

在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 App以PWA本地运行
git clone https://github.com/Apress/pro-angular-6
cd pro-angular-6
cd "09 - SportsStore - Admin"
cd SportsStore
ng add @angular/pwa
因此，根据angular docs>，最后一条命令是通过添加@angular/service-worker并将ServiceWorkerModule注册到ngsw-worker.js来添加app.component.ts包

运行以下内容将构建项目并创建包含/dist的{{1}}文件夹
ngsw-worker.js
运行以下命令意味着我可以在本地将其作为PWA运行。
ng build --prod
不太相关，但打开单独的cmd并运行以下命令即可为应用填充数据。
http-server -p 8080 -c-1 dist/SportsStore
第2步：让Angular 6应用程序在Heroku上运行

经过编辑的npm run json将package.json，@angular/cli，@angular/compiler-cli和typescript从devDependencies移到了>到依赖项

This博客文章建议使用@angular-devkit/build-angular": "~0.6.8"而不是"postinstall": "ng build --aot --prod"。让我们尝试一下。

Ran
"ng build --prod"
为npm install express path --save添加了与OP相同的代码。我在其他人的博客文章中使用server.js>遇到了一些问题，但将其更改回了./dist

在package.json中编辑为/dist。嗯，至少是不同的

部署到 heroku （大致沿……行）
"start": "node server.js"

如何将Angular App部署到Heroku并保持为PWA？

1 个答案:

橡皮鸭

步骤1：让Angular 6 App以PWA本地运行

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