Error while deploying Angular 2 to Heroku

Question

Need help deploying angular 2 app which was created using the angular-cli. My application runs on port 4200 locally and I have proxy settings that route my url requests to localhost:8080 where my backend server (spring-boot app) is running.

I have deployed my backend server to heroku successfully. Now I want to deploy my angular app to heroku as well.

While executing "ng build --aot -prod", the build fails with error "ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /tmp/build_cc056824e4c062306cc02ac5a41c4dc8/node_modules/angular-datatables/node_modules/@angular/core/core.d.ts".

Below is package.json file

{
  "name": "client-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng server --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "preinstall": "npm install -g http-server",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-datatables": "^4.1.0",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.15",
    "datatables.net-dt": "^1.10.15",
    "jquery": "^3.2.1",
    "ng2-uploader": "^2.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@types/datatables.net": "^1.10.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  },
  "engines": {
  "node": "6.10.3",
  "npm": "3.10.10"
  },
  "devDependencies": {

  }
}

and my proxy.conf.json file -

{
    "/api":{
    "target" : "http://localhost:8080",
    "secure" : false
    }
}

Magnus Melwin Magnus Melwin · Accepted Answer · 2017-07-19T05:06:33

Please check your Procfile - you need to create one like this

Heroku needs a ProcFile to deploy it.

ProcFile:

web: tsc && lite-server

The above is my configuration.

And then replace it with the line from package.json

"start": "ng server --proxy-config proxy.conf.json",

And change it to web: ng server --proxy-config proxy.conf.json in the ProcFile Your ProcFile should look like the below

web: ng-server --proxy-config proxy.conf.json

Push the changes on to the git of heroku as given below

git add .
git commit -m 'Procfile Updated'
git push heroku master

then type in the cli after the git commit is uploaded

heroku ps:scale web=1 Test run the app on your local machine

 heroku local web

If the app doesnt run properly

run

heroku logs

check your log output for any errors.

Finally if the app runs fine locally then do

heroku open

This will run the app from the heroku cloud.

Hope that helps.

Error while deploying Angular 2 to Heroku

1 Answers