search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

Deployment on Heroku #2517

Closed splacentino closed 8 years ago

splacentino commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

Ok it is as I expected.

Thank you.

richpeck commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago 
remote:        > execSync@1.0.2 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:        > node-zopfli@2.0.1 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                                                                              li@2.0.1 and node@6.6.0 (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! portal@0.0.0 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 commented 8 years ago

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 commented 8 years ago

@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

artem-galas commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

SOftEngrAtta commented 7 years ago

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 commented 7 years ago

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

I hope it's help

MANOJPATRA1991 commented 7 years ago

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[bot] commented 5 years ago

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.