Deployment on Heroku

[splacentino]

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.

[saivarunk]

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.

[splacentino]

Ok it is as I expected.

Thank you.

[richpeck]

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/"

[splacentino]

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.

[filipesilva]

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.

[splacentino]

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 reviving���������������������220ms 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 optimization�����������������������������17ms chunk order optimization
2016-10-10T06:33:09.807797+00:00 app[web.1]: �������������������������� 85% chunk id optimization��������������������������16ms chunk id optimization
2016-10-10T06:33:09.976336+00:00 app[web.1]: �������������������������������� 91% additional asset processing�����������������������������������18261ms additional asset processing
2016-10-10T06:33:10.139253+00:00 app[web.1]: ����������������������������� 92% chunk asset optimization������������������������������163ms chunk asset optimization
2016-10-10T06:33:12.052623+00:00 app[web.1]: ������������ 86% hashing��������������2245ms 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 processing�����������������������������193ms 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.

[richpeck]

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

[filipesilva]

@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 #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: #1560 (comment)

[artem-galas]

@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]

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"
  }
}

[rmcsharry]

@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]

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

[SOftEngrAtta]

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

[artem-galas]

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

I hope it's help

[MANOJPATRA1991]

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

[angular-automatic-lock-bot]

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.}