Angular-cli: Deployment on Heroku

Created on 5 Oct 2016  路  16Comments  路  Source: angular/angular-cli

Versions.

angular-cli: 1.0.0-beta.16
node: 6.6.0

Hi. I would like to deploy my angular2 app on a Heroku web dyno. What is the best way to do it using angular-cli.

At this time, I build the prod. version locally and push my dist/ folder on Git. Then I use http-server to serve the static files from dist/

    "start.prod": "http-server dist/",
    "build.prod": "ng build --prod",

Procfile

npm run start.prod

There would probably be a cleaner way to do it. I can't make CLI working on the Heroku dyno so I am not able to build the app on it.

Thanks in advance.

more info RFC / discussion / question
Source
picture splacentino
👍1

Most helpful comment

If anyone needs to deploy to heroku, pls, read this article first:
https://m.alphasights.com/using-nginx-on-heroku-to-serve-single-page-apps-and-avoid-cors-5d013b171a45#.drmqhuard

Use this build pack: https://github.com/heroku/heroku-buildpack-static

And this static.json: 

{
  "root": "dist/",
  "routes": {
    "/**": "index.html"
  }
}
picture artem-galas on 27 Oct 2016
👍4 ❤1

All 16 comments

You need a backend like Node JS to run Angular apps on clouds like Heroku. Please use this Node Quickstart kit from Heroku to deploy an nodejs app on Heroku.

saivarunk picture saivarunk on 5 Oct 2016

Ok it is as I expected.

Thank you.

splacentino picture splacentino on 5 Oct 2016

Heroku uses postinstall and preinstall hooks which you can use to build:

"preinstall": "npm install -g http-server",
"postinstall": "ng build --prod"

You can also use the "start" hook to serve:

"start": "http-server dist/"

richpeck picture richpeck on 7 Oct 2016
🎉3

Hey @richpeck thanks for your answer.

I can not build with ng because the CLI is not available on Heroku server: the installation of angular-cli fails and I think it is because of the C/C++ compilation it performs while installing.

splacentino picture splacentino on 7 Oct 2016

Heya @splacentino, glad you got an answer for the deploy. If you can show me the install errors you get, I might be able to help.

filipesilva picture filipesilva on 10 Oct 2016 
remote:        > [email protected] install /tmp/build_8148002102394767765bede8                                                                              f27e8aea/node_modules/execSync
remote:        > node install.js
remote:
remote:        [execsync v1.0.2] Attempting to compile native extensions.
remote:        [execSync v1.0.2]
remote:        Native code compile failed!!
remote:
remote:        > [email protected] install /tmp/build_8148002102394767765be                                                                              de8f27e8aea/node_modules/node-zopfli
remote:        > node-pre-gyp install --fallback-to-build
remote:
remote:        node-pre-gyp ERR! Tried to download: https://node-zopfli.s3.                                                                              amazonaws.com/Release/zopfli-v2.0.1-node-v48-linux-x64.tar.gz
remote:        node-pre-gyp ERR! Pre-built binaries not found for node-zopf                                                                              [email protected] and [email protected] (node-v48 ABI) (falling back to source compile with                                                                               node-gyp)

This is the compilation while the angular-cli is installing. Even if it fails, it goes ahead and run my script: ng build --prod && http-server dist/ but the build part fails.

2016-10-10T06:33:09.526598+00:00 app[web.1]:  77% chunk optimization 0ms chunk optimization
2016-10-10T06:33:09.533365+00:00 app[web.1]:  78% advanced chunk optimization 7ms advanced chunk optimization
2016-10-10T06:33:09.533525+00:00 app[web.1]:  79% module and chunk tree optimization 0ms module and chunk tree optimization
2016-10-10T06:33:09.754110+00:00 app[web.1]:  80% module reviving220ms module reviving
2016-10-10T06:33:09.763001+00:00 app[web.1]:  81% module order optimization 9ms module order optimization
2016-10-10T06:33:09.768504+00:00 app[web.1]:  82% module id optimization 6ms module id optimization
2016-10-10T06:33:09.774797+00:00 app[web.1]:  83% chunk reviving 6ms chunk reviving
2016-10-10T06:33:09.791528+00:00 app[web.1]:  84% chunk order optimization17ms chunk order optimization
2016-10-10T06:33:09.807797+00:00 app[web.1]:  85% chunk id optimization16ms chunk id optimization
2016-10-10T06:33:09.976336+00:00 app[web.1]:  91% additional asset processing18261ms additional asset processing
2016-10-10T06:33:10.139253+00:00 app[web.1]:  92% chunk asset optimization163ms chunk asset optimization
2016-10-10T06:33:12.052623+00:00 app[web.1]:  86% hashing2245ms hashing
2016-10-10T06:33:12.054197+00:00 app[web.1]:  87% module assets processing 2ms module assets processing
2016-10-10T06:33:12.247128+00:00 app[web.1]:  88% chunk assets processing193ms chunk assets processing
2016-10-10T06:33:12.250686+00:00 app[web.1]:  89% additional chunk assets processing 3ms additional chunk assets processing
2016-10-10T06:33:12.250878+00:00 app[web.1]:  90% recording 0ms recording
2016-10-10T06:33:13.800204+00:00 app[web.1]:  94% asset optimizationError in bail mode: [default] /app/src/app/app.component.ts:5:12 
2016-10-10T06:33:13.800264+00:00 app[web.1]: Cannot find name 'require'.
2016-10-10T06:33:14.007497+00:00 app[web.1]: 
2016-10-10T06:33:14.055247+00:00 app[web.1]: npm ERR! Linux 3.13.0-93-generic
2016-10-10T06:33:14.056171+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/node_modules/.bin/npm" "run" "build"
2016-10-10T06:33:14.057108+00:00 app[web.1]: npm ERR! node v6.6.0
2016-10-10T06:33:14.057461+00:00 app[web.1]: npm ERR! npm  v2.14.21
2016-10-10T06:33:14.057774+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-10-10T06:33:14.057962+00:00 app[web.1]: npm ERR! [email protected] build: `ng build --prod`

There is no require in my app /app/src/app/app.component.ts:5:12 as said in the log.

splacentino picture splacentino on 10 Oct 2016

I have it running on Heroku. My package.json looks as follows:

{
  "name": "commonplace-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "_heroku":      "https://www.angularonrails.com/deploy-rails-application-angular-cli-webpack-front-end/",
    "start":        "http-server dist/",
    "lint":         "tslint \"src/**/*.ts\"",
    "test":         "ng test",
    "pree2e":       "webdriver-manager update",
    "e2e":          "protractor",
    "preinstall":   "npm install -g http-server",
    "postinstall":  "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "ng2-ckeditor": "^1.0.7",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

Successfully builds and deploys

richpeck picture richpeck on 10 Oct 2016
👍3 ❤1

@splacentino I think I know what's happening, you need some @types/node added to your dependencies. We were getting it transitively via protractor, but then added it explicitly in https://github.com/angular/angular-cli/pull/2528.

That should fix your missing require issue. You don't have it in your code but it's still used internally for template inlining.

The node-gyp errors aren't real npm errors, you can find an explanation here: https://github.com/angular/angular-cli/issues/1560#issuecomment-240913794

filipesilva picture filipesilva on 10 Oct 2016

@richpeck Thanks, this helped. But I encountered an issue with routes. If we navigate through routes - all is good, but if we paste a direct URL, we get 404 error.
For example, if we go to mysite.com and navigate through pages using navbar, then all is ok. But if we enter in browser mysite.com/page1, we will get 404 error.
Do you know how to solve this?

artem-galas picture artem-galas on 27 Oct 2016

If anyone needs to deploy to heroku, pls, read this article first:
https://m.alphasights.com/using-nginx-on-heroku-to-serve-single-page-apps-and-avoid-cors-5d013b171a45#.drmqhuard

Use this build pack: https://github.com/heroku/heroku-buildpack-static

And this static.json: 

{
  "root": "dist/",
  "routes": {
    "/**": "index.html"
  }
}
artem-galas picture artem-galas on 27 Oct 2016
👍4 ❤1

@artem-galas I get the same issue as you. Pasting a url or trying to refresh the page on an existing url both throw 404 errors. Did you find a solution?

rmcsharry picture rmcsharry on 12 Mar 2017

@artem-galas I discovered why the 404's occur. More info here and here

rmcsharry picture rmcsharry on 12 Mar 2017

I am facing the application error problem .

my package.json file

{
"name": "testing-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node server",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.4.4",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"chart.js": "^2.7.0",
"core-js": "^2.4.1",
"express": "^4.16.1",
"hammerjs": "^2.0.8",
"moment": "^2.18.1",
"ng2-charts": "^1.6.0",
"ng2-select": "^1.2.0",
"ngx-pagination": "^3.0.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.3.1",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}

i donot know where i did mistake , kindly help me asap . Thankyou

SOftEngrAtta picture SOftEngrAtta on 9 Oct 2017

@SOftEngrAtta please look at my gist
https://gist.github.com/artem-galas/067b52b0d197173bfaa14d25766ee49c

I hope it's help

artem-galas picture artem-galas on 9 Oct 2017
❤2

In app.module.ts,

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

and add {provide: LocationStrategy, useClass: HashLocationStrategy} to the providers array.

This will solve the issue.

No need of any build packs.

You can checkout my angular 4 app at https://whiteboard-app.herokuapp.com

MANOJPATRA1991 picture MANOJPATRA1991 on 19 Oct 2017

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

brtnshrdr picture brtnshrdr  路  3Comments
rwillmer picture rwillmer  路  3Comments
hareeshav picture hareeshav  路  3Comments
MateenKadwaikar picture MateenKadwaikar  路  3Comments
IngvarKofoed picture IngvarKofoed  路  3Comments