角度环境变量停止工作-Heroku应用

时间:2019-03-30 17:29:44

标签: angular heroku angular-cli

我在heroku上托管了一个项目,自上次部署以来,它不使用生产环境文件变量。我已经在我的angular.json文件中配置了替换变量文件以进行生产,并且该文件过去曾经运行过,但是只是突然停止了。

这是我的angular.json文件:

            {
              "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
              "version": 1,
              "newProjectRoot": "projects",
              "projects": {
                "project-tips": {
                  "root": "",
                  "sourceRoot": "src",
                  "projectType": "application",
                  "prefix": "app",
                  "schematics": {},
                  "architect": {
                    "build": {
                      "builder": "@angular-devkit/build-angular:browser",
                      "options": {
                        "outputPath": "dist/project-tips",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                          {
                            "glob": "**/*",
                            "input": "./node_modules/leaflet/dist/images",
                            "output": "leaflet/"
                          },
                          "src/favicon.ico",
                          "src/assets"
                        ],
                        "styles": [
                          "src/styles.css"
                        ],
                        "scripts": [
                          {
                            "input": "node_modules/document-register-element/build/document-register-element.js"
                          },
                          {
                            "input": "node_modules/document-register-element/build/document-register-element.js"
                          }
                        ]
                      },
                      "configurations": {
                        "production": {
                          "fileReplacements": [
                            {
                              "replace": "src/environments/environment.ts",
                              "with": "src/environments/environment.prod.ts"
                            }
                          ],
                          "optimization": true,
                          "outputHashing": "all",
                          "sourceMap": false,
                          "extractCss": true,
                          "namedChunks": false,
                          "aot": true,
                          "extractLicenses": true,
                          "vendorChunk": false,
                          "buildOptimizer": true
                        }
                      }
                    },
                    "serve": {
                      "builder": "@angular-devkit/build-angular:dev-server",
                      "options": {
                        "browserTarget": "project-tips:build"
                      },
                      "configurations": {
                        "production": {
                          "browserTarget": "project-tips:build:production"
                        }
                      }
                    },
                    "extract-i18n": {
                      "builder": "@angular-devkit/build-angular:extract-i18n",
                      "options": {
                        "browserTarget": "project-tips:build"
                      }
                    },
                    "test": {
                      "builder": "@angular-devkit/build-angular:karma",
                      "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                          "src/styles.css"
                        ],
                        "scripts": [],
                        "assets": [
                          {
                            "glob": "**/*",
                            "input": "./node_modules/leaflet/dist/images",
                            "output": "leaflet/"
                          },
                          "src/favicon.ico",
                          "src/assets"
                        ]
                      }
                    },
                    "lint": {
                      "builder": "@angular-devkit/build-angular:tslint",
                      "options": {
                        "tsConfig": [
                          "src/tsconfig.app.json",
                          "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                          "**/node_modules/**"
                        ]
                      }
                    }
                  }
                },
                "project-tips-e2e": {
                  "root": "e2e/",
                  "projectType": "application",
                  "architect": {
                    "e2e": {
                      "builder": "@angular-devkit/build-angular:protractor",
                      "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "project-tips:serve"
                      },
                      "configurations": {
                        "production": {
                          "devServerTarget": "project-tips:serve:production"
                        }
                      }
                    },
                    "lint": {
                      "builder": "@angular-devkit/build-angular:tslint",
                      "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                          "**/node_modules/**"
                        ]
                      }
                    }
                  }
                }
              },
              "defaultProject": "project-tips"
            }

这是我的package.json文件:

            {
                "name": "project-tips",
                "version": "0.0.0",
                "scripts": {
                    "ng": "ng",
                    "build": "ng build",
                    "start": "node server.js",
                    "test": "ng test",
                    "lint": "ng lint",
                    "e2e": "ng e2e",
                    "postinstall": "ng build --aot --prod"
                },
                "private": true,
                "dependencies": {
                    "@agm/core": "^1.0.0-beta.5",
                    "@agm/js-marker-clusterer": "^1.0.0-beta.5",
                    "@agm/snazzy-info-window": "^1.0.0-beta.5",
                    "@angular/animations": "^6.1.0",
                    "@angular/cli": "^7.0.5",
                    "@angular/common": "^6.1.0",
                    "@angular/compiler": "^6.1.0",
                    "@angular/compiler-cli": "^6.1.0",
                    "@angular/core": "^6.1.0",
                    "@angular/elements": "^6.1.10",
                    "@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",
                    "@asymmetrik/ngx-leaflet": "^4.0.0",
                    "@asymmetrik/ngx-leaflet-markercluster": "^1.0.0",
                    "@auth0/angular-jwt": "^2.0.0",
                    "@fortawesome/fontawesome-free": "^5.5.0",
                    "@hackages/ngxerrors": "^6.0.3",
                    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
                    "@ngx-translate/core": "^11.0.0",
                    "@ngx-translate/http-loader": "^4.0.0",
                    "@types/leaflet": "^1.2.13",
                    "@types/leaflet.markercluster": "^1.0.3",
                    "@ultimate/ngxerrors": "^1.4.0",
                    "@webcomponents/custom-elements": "^1.2.1",
                    "angulartics2": "^7.4.1",
                    "bootstrap": "^4.1.3",
                    "core-js": "^2.5.4",
                    "document-register-element": "^1.7.2",
                    "express": "^4.16.4",
                    "js-marker-clusterer": "^1.0.0",
                    "jwt-decode": "^2.2.0",
                    "leaflet": "^1.3.4",
                    "leaflet.markercluster": "^1.4.1",
                    "ng4-loading-spinner": "^1.2.3",
                    "ngx-toastr": "^9.1.1",
                    "ngx-toggle": "^2.0.1",
                    "ngx-ui-switch": "^8.0.0-beta.0",
                    "rxjs": "^6.2.2",
                    "save": "^2.3.3",
                    "snazzy-info-window": "^1.1.1",
                    "zone.js": "~0.8.26"
                },
                "devDependencies": {
                    "@angular-devkit/build-angular": "^0.13.1",
                    "@angular/cli": "^7.0.5",
                    "@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"
                },
                "engines": {
                    "node": "~8.12.0",
                    "npm": "~6.4.1"
                }
            }

2 个答案:

答案 0 :(得分:1)

I have the same issue. Used to work. What's below don't do the trick no more.

//This will be local on prod (on heroku) 
    if(environment.production) {

      this.environmentName = "Production";

    } else {

      this.environmentName = "Local";

    }

Configuration

"production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,`enter code here`
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [{
                "type": "initial",
                "maximumWarning": "4mb",
                "maximumError": "5mb"
              }]
            }

答案 1 :(得分:0)

您应该做的是package.json文件中的代码,如下所示:

"scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod" <---- here
  }

用以下行替换后安装:

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

对我来说很好,我希望你能解决这个问题。