Question

很抱歉，如果某个地方回答了这个问题。

我能够将Angular应用程序部署到heroku，但是尽管采取了本文中的步骤，但它不会在PRODUCTION模式下运行。

https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

环境文件夹中有两个文件：

environment.prod.ts
environment.ts

从本质上讲，似乎Heroku使用了名为environment.ts的第二个环境文件，而不是使用environment.prod.ts

在environment.ts中，有一个env变量：

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {

  production: false,

};

fileReplacements也已正确设置。

environment.prod.ts文件还包含变量 production ，其值为 true 。

使用以下简单代码，我们知道它不是生产模式：

export class SettingsComponent implements OnInit {

  environmentIsProduction: boolean = false;

  constructor() {

  }

  ngOnInit() {
    this.environmentIsProduction = environment.production;
    console.warn('Environment is PRODUCTION: ' + environment.production);
  }

}

有人能对我们可能已经忘记的一步提出建议吗？

这是整个package.json文件

{
  "name": "angular-frontend",
  "version": "0.0.0",
  "engines": {
    "node": "8.11.2",
    "npm": "6.2.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^7.2.1",
    "@angular/cli": "~6.2.3",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.2.2",
    "@swimlane/ngx-datatable": "^14.0.0",
    "angular-notifier": "^4.1.1",
    "angular-svg-icon": "^7.0.1",
    "angularx-social-login": "^1.2.6",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "flag-icon-css": "^3.3.0",
    "jquery": "^1.9.1",
    "jw-bootstrap-switch-ng2": "^2.0.2",
    "ng-connection-service": "^1.0.4",
    "ng-pick-datetime": "^6.0.16",
    "ng2-currency-mask": "^5.3.1",
    "ng2-nouislider": "^1.7.12",
    "ngx-bootstrap": "^3.0.1",
    "ngx-flag-icon-css": "^1.0.1",
    "ngx-webstorage-service": "^3.1.1",
    "nouislider": "^11.0.0",
    "path": "^0.12.7",
    "popper.js": "^1.14.4",
    "rellax": "^1.7.0",
    "rxjs": "~6.2.0",
    "typescript": "~2.9.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.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",
    "typescript": "~2.9.2"
  }
}

Answer 1

我希望这对某人有帮助。...

终于找到了解决方案：https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

在package.json中，必须更改以下行：

"postinstall": "ng build --aot --prod"

到

"heroku-postbuild": "ng build --configuration=production"

尽管原始命令确实执行了生产构建和文件名混淆等所有步骤，但仍在进行修剪...。此后，它正在运行正常的ng构建。

在部署到Heroku期间，我在日志中注意到了此行为。

一旦使用了heroku-postbuild，该构建仅发生一次……即可进行生产。

Answer 2

对于在 2021 年遇到此问题的任何人，在 package.json 中使用 postinstall 或 heroku-postbuild 的替代方法是在 Heroku 应用的设置中将 NODE_BUILD_FLAG 添加到您的配置变量中。

进入 Heroku 应用程序的设置后，就像单击显示配置变量、将新键设置为 NODE_BUILD_FLAG 并将其值设置为 --configuration=production 一样简单，瞧！ Heroku 会自动将 --configuration=production 附加到 ng build。一旦你点击部署，它就会知道根据你的构建脚本运行 ng build，

"build": "ng build"

附加新配置的标志，您的应用应该处于生产模式，对您的存储库没有任何实际更改！

这是一个漂亮的 Heroku 小技巧，可以帮助并且应该与大量基于 Node.js 的应用程序类似地工作，所以希望这可以帮助遇到这个问题的任何人！

Answer 3

扩展@Nick C 对部署 Angular Universal 的人的回答。在构建 Angular Universal 时，命令最终看起来像：
ng build --configuration=production && ng run my-app:server:production

不幸的是，我无法将其与 Heroku 的 NODE_BUILD_FLAGS 一起使用。我最终创建了一个小节点脚本。该解决方案还允许我部署到 Heroku 登台服务器和生产服务器。节点脚本读取节点环境变量，然后决定运行哪个构建命令。

在 package.json 中："build": "node build-app.js",

build-app.js：

const { exec } = require('child_process');

let buildScript = 'ng build --configuration=staging && ng run my-app:server:staging';
if (process.env.ANGULAR_ENVIRONMENT_CONFIGURATION === 'production') {
    buildScript = 'ng build --configuration=production';
}
const child = exec(buildScript, function (err, stdout, stderr) {
    if (err) throw err;
    else console.info(stdout);
});

child.stdout.on('data', function (data) {
    process.stdout.write(data);
});

child.stderr.on('data', function (data) {
    process.stdout.write(data);
});

child.on('exit', function (data) {
    process.stdout.write("I'm done!");
});

我在我的博客文章中介绍了更多细节，包括更新 angular.json：https://dev.to/jfbloom22/a-better-way-to-deploy-angular-universal-to-multiple-environments-206j

在生产模式下将Angular部署到Heroku

3 个答案: