Angular-cli: Heroku Deployment Failing

Created on 8 Feb 2017 · 11Comments · Source: angular/angular-cli

Versions.

ng -versions gives: angular-cli: 1.0.0-beta.26 node: 7.4.0 os: darwin x64 @angular/common: 2.4.5 @angular/compiler: 2.4.5 @angular/core: 2.4.5 @angular/forms: 2.4.5 @angular/http: 2.4.5 @angular/platform-browser: 2.4.5 @angular/platform-browser-dynamic: 2.4.5 @angular/router: 3.4.5 @angular/compiler-cli: 2.4.5

Repro steps.

The app was created using AngularCLI and no changes have been made to the configurations.

The log given by the failure.

Heroku CLI log: 2017-02-08T17:39:26.526391+00:00 app[web.1]: > [email protected] start /app 2017-02-08T17:39:26.526392+00:00 app[web.1]: > ng serve 2017-02-08T17:39:26.526393+00:00 app[web.1]: 2017-02-08T17:39:26.846206+00:00 app[web.1]: As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, 2017-02-08T17:39:26.846219+00:00 app[web.1]: which will only support Node 6.9 and greater. This package will be officially deprecated 2017-02-08T17:39:26.846221+00:00 app[web.1]: shortly after. 2017-02-08T17:39:26.846221+00:00 app[web.1]: 2017-02-08T17:39:26.846222+00:00 app[web.1]: To disable this warning use "ng set --global warnings.packageDeprecation=false". 2017-02-08T17:39:26.846223+00:00 app[web.1]: 2017-02-08T17:39:27.242157+00:00 app[web.1]: Cannot read property 'input' of null 2017-02-08T17:39:27.246940+00:00 app[web.1]: TypeError: Cannot read property 'input' of null 2017-02-08T17:39:27.246943+00:00 app[web.1]: at ObjectSchemaTreeNode._set (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:347:132) 2017-02-08T17:39:27.246943+00:00 app[web.1]: at new ObjectSchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:331:14) 2017-02-08T17:39:27.246944+00:00 app[web.1]: at OneOfSchemaTreeNode.NonLeafSchemaTreeNode._createChildProperty (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:244:24) 2017-02-08T17:39:27.246945+00:00 app[web.1]: at /app/node_modules/@ngtools/json-schema/src/schema-tree.js:260:26 2017-02-08T17:39:27.246947+00:00 app[web.1]: at Array.map (native) 2017-02-08T17:39:27.246947+00:00 app[web.1]: at new OneOfSchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:259:48) 2017-02-08T17:39:27.246948+00:00 app[web.1]: at ArraySchemaTreeNode.NonLeafSchemaTreeNode._createChildProperty (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:244:24) 2017-02-08T17:39:27.246949+00:00 app[web.1]: at ArraySchemaTreeNode._set (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:434:39) 2017-02-08T17:39:27.246949+00:00 app[web.1]: at new ArraySchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:414:14) 2017-02-08T17:39:27.246950+00:00 app[web.1]: at ObjectSchemaTreeNode.NonLeafSchemaTreeNode._createChildProperty (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:244:24) 2017-02-08T17:39:27.246951+00:00 app[web.1]: at ObjectSchemaTreeNode._set (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:347:47) 2017-02-08T17:39:27.246951+00:00 app[web.1]: at new ObjectSchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:331:14) 2017-02-08T17:39:27.246952+00:00 app[web.1]: at ArraySchemaTreeNode.NonLeafSchemaTreeNode._createChildProperty (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:244:24) 2017-02-08T17:39:27.246953+00:00 app[web.1]: at ArraySchemaTreeNode._set (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:434:39) 2017-02-08T17:39:27.246953+00:00 app[web.1]: at new ArraySchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:414:14) 2017-02-08T17:39:27.246954+00:00 app[web.1]: at RootSchemaTreeNode.NonLeafSchemaTreeNode._createChildProperty (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:244:24) 2017-02-08T17:39:27.246955+00:00 app[web.1]: at RootSchemaTreeNode.ObjectSchemaTreeNode._set (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:347:47) 2017-02-08T17:39:27.246956+00:00 app[web.1]: at RootSchemaTreeNode.ObjectSchemaTreeNode [as constructor] (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:331:14) 2017-02-08T17:39:27.246956+00:00 app[web.1]: at new RootSchemaTreeNode (/app/node_modules/@ngtools/json-schema/src/schema-tree.js:478:16) 2017-02-08T17:39:27.246957+00:00 app[web.1]: at GeneratedSchemaClass.SchemaClassBase (/app/node_modules/@ngtools/json-schema/src/schema-class-factory.js:66:29) 2017-02-08T17:39:27.246958+00:00 app[web.1]: at new GeneratedSchemaClass (/app/node_modules/@ngtools/json-schema/src/schema-class-factory.js:165:20) 2017-02-08T17:39:27.246958+00:00 app[web.1]: at new CliConfig (/app/node_modules/angular-cli/models/config/config.js:24:24) 2017-02-08T17:39:27.246959+00:00 app[web.1]: at Function.CliConfig.fromConfigPath (/app/node_modules/angular-cli/models/config/config.js:99:16) 2017-02-08T17:39:27.246960+00:00 app[web.1]: at Function.CliConfig.fromProject (/app/node_modules/angular-cli/models/config.js:63:44) 2017-02-08T17:39:27.246960+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/angular-cli/commands/serve.js:6:33) 2017-02-08T17:39:27.246961+00:00 app[web.1]: at Module._compile (module.js:571:32) 2017-02-08T17:39:27.246962+00:00 app[web.1]: at Object.Module._extensions..js (module.js:580:10) 2017-02-08T17:39:27.246962+00:00 app[web.1]: at Module.load (module.js:488:32) 2017-02-08T17:39:27.246963+00:00 app[web.1]: at tryModuleLoad (module.js:447:12) 2017-02-08T17:39:27.246963+00:00 app[web.1]: at Function.Module._load (module.js:439:3) 2017-02-08T17:39:27.246964+00:00 app[web.1]: at Module.require (module.js:498:17) 2017-02-08T17:39:27.246964+00:00 app[web.1]: at require (internal/module.js:20:19) 2017-02-08T17:39:27.246965+00:00 app[web.1]: at Class.includedCommands (/app/node_modules/angular-cli/addon/index.js:23:16) 2017-02-08T17:39:27.246966+00:00 app[web.1]: at /app/node_modules/angular-cli/ember-cli/lib/models/project.js:316:61 2017-02-08T17:39:27.246966+00:00 app[web.1]: at Array.forEach (native) 2017-02-08T17:39:27.246967+00:00 app[web.1]: at Project.addonCommands (/app/node_modules/angular-cli/ember-cli/lib/models/project.js:315:15) 2017-02-08T17:39:27.246968+00:00 app[web.1]: at Project.eachAddonCommand (/app/node_modules/angular-cli/ember-cli/lib/models/project.js:350:30) 2017-02-08T17:39:27.246968+00:00 app[web.1]: at module.exports (/app/node_modules/angular-cli/ember-cli/lib/cli/lookup-command.js:33:13) 2017-02-08T17:39:27.246969+00:00 app[web.1]: at CLI.<anonymous> (/app/node_modules/angular-cli/ember-cli/lib/cli/cli.js:42:26) 2017-02-08T17:39:27.246970+00:00 app[web.1]: at tryCatch (/app/node_modules/rsvp/dist/rsvp.js:538:12) 2017-02-08T17:39:27.246970+00:00 app[web.1]: at invokeCallback (/app/node_modules/rsvp/dist/rsvp.js:553:13) 2017-02-08T17:39:27.246971+00:00 app[web.1]: at publish (/app/node_modules/rsvp/dist/rsvp.js:521:7) 2017-02-08T17:39:27.246971+00:00 app[web.1]: at flush (/app/node_modules/rsvp/dist/rsvp.js:2373:5) 2017-02-08T17:39:27.246972+00:00 app[web.1]: at _combinedTickCallback (internal/process/next_tick.js:67:7) 2017-02-08T17:39:27.246973+00:00 app[web.1]: at process._tickCallback (internal/process/next_tick.js:98:9) 2017-02-08T17:39:27.259675+00:00 app[web.1]: 2017-02-08T17:39:27.279872+00:00 app[web.1]: npm ERR! Linux 3.13.0-105-generic 2017-02-08T17:39:27.280544+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start" 2017-02-08T17:39:27.281033+00:00 app[web.1]: npm ERR! node v7.4.0 2017-02-08T17:39:27.281383+00:00 app[web.1]: npm ERR! npm v4.0.5 2017-02-08T17:39:27.281690+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2017-02-08T17:39:27.281913+00:00 app[web.1]: npm ERR! [email protected] start: `ng serve` 2017-02-08T17:39:27.282111+00:00 app[web.1]: npm ERR! Exit status 1 2017-02-08T17:39:27.282396+00:00 app[web.1]: npm ERR! 2017-02-08T17:39:27.282597+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'ng serve'. 2017-02-08T17:39:27.283078+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed. 2017-02-08T17:39:27.283658+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the angular-app package, 2017-02-08T17:39:27.283994+00:00 app[web.1]: npm ERR! not with npm itself. 2017-02-08T17:39:27.284353+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 2017-02-08T17:39:27.284557+00:00 app[web.1]: npm ERR! ng serve 2017-02-08T17:39:27.284771+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with: 2017-02-08T17:39:27.284981+00:00 app[web.1]: npm ERR! npm bugs angular-app 2017-02-08T17:39:27.285178+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via: 2017-02-08T17:39:27.285372+00:00 app[web.1]: npm ERR! npm owner ls angular-app 2017-02-08T17:39:27.285571+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 2017-02-08T17:39:27.291449+00:00 app[web.1]: 2017-02-08T17:39:27.291721+00:00 app[web.1]: npm ERR! Please include the following file with any support request: 2017-02-08T17:39:27.291870+00:00 app[web.1]: npm ERR! /app/npm-debug.log 2017-02-08T17:39:27.420149+00:00 heroku[web.1]: Process exited with status 1 2017-02-08T17:39:27.486537+00:00 heroku[web.1]: State changed from starting to crashed

Source

q-ode

Most helpful comment

Don't use ng serve outside of your computer :)
Use another html server or create a simple express server.js.

Also, try disabling NODE_MODULES_CACHE: https://devcenter.heroku.com/articles/nodejs-support#cache-behavior

Example package.json with scripts for Heroku (notice that I moved @angular/cli from dev and a few others so you can build on postinstall:

{
  "name": "c3po",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "e2e": "protractor",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "pretest": "npm run lint",
    "start": "node server.js",
    "postinstall": "ng build --target=production -e ${NODE_ENV:-production} --aot",
    "update": "ng update --style scss --prefix xc",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "1.0.0-beta.29",
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/compiler-cli": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "compression": "^1.6.2",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "path": "^0.12.7",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typescript": "~2.0.3",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "git-scripts": "^0.2.1",
    "jasmine-core": "2.5.2",
    "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",
    "karma-threshold-reporter": "^0.1.15",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0"
  },
  "engines": {
    "node": "6.x.x"
  }
}

Example server.js:

const compression = require('compression');
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

// Gzip
app.use(compression());

// Run the app by serving the static files in the dist directory
app.use(express.static(__dirname + '/dist'));

// Start the app by listening on the default Heroku port
app.listen(port);

// For all GET requests, send back index.html so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

console.log(`Server listening on ${port}`);

intellix on 9 Feb 2017

👍5 🎉1

All 11 comments

I think you are having the same issue described here: https://github.com/angular/angular-cli/issues/4207#issuecomment-277840301

mikejpeters on 9 Feb 2017

Don't use ng serve outside of your computer :)
Use another html server or create a simple express server.js.

Also, try disabling NODE_MODULES_CACHE: https://devcenter.heroku.com/articles/nodejs-support#cache-behavior

Example package.json with scripts for Heroku (notice that I moved @angular/cli from dev and a few others so you can build on postinstall:

{
  "name": "c3po",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "e2e": "protractor",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "pretest": "npm run lint",
    "start": "node server.js",
    "postinstall": "ng build --target=production -e ${NODE_ENV:-production} --aot",
    "update": "ng update --style scss --prefix xc",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "1.0.0-beta.29",
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/compiler-cli": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "compression": "^1.6.2",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "path": "^0.12.7",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typescript": "~2.0.3",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "git-scripts": "^0.2.1",
    "jasmine-core": "2.5.2",
    "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",
    "karma-threshold-reporter": "^0.1.15",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0"
  },
  "engines": {
    "node": "6.x.x"
  }
}

Example server.js:

const compression = require('compression');
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

// Gzip
app.use(compression());

// Run the app by serving the static files in the dist directory
app.use(express.static(__dirname + '/dist'));

// Start the app by listening on the default Heroku port
app.listen(port);

// For all GET requests, send back index.html so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

console.log(`Server listening on ${port}`);

intellix on 9 Feb 2017

👍5 🎉1

@intellix Thanks man!

You're a life saver!

Pardon my asking why ng serve shouldn't be used outside my local system.

q-ode on 9 Feb 2017

It's developed to be used as a development server so:

Performance
No security guarantees

And this line :D https://github.com/angular/angular-cli/blob/b8328dca5531211fcd7411e229cfe2da64d0b65e/packages/%40angular/cli/tasks/serve.ts#L123

intellix on 9 Feb 2017

👍1

@intellix Thanks, didn't see that in the documentation.

q-ode on 11 Feb 2017

It is possible to install the cli on Heroku now ?

Had issues while compiling on server..

splacentino on 17 Feb 2017

@intellix, why the doc on the main webpage https://cli.angular.io/ is saying:

ng serve

Easily put your application in production

benoitmugnier on 20 Feb 2017

@benoitmugnier because... that doc is massively outdated and we really should have updated it by now, but haven't yet.

Please disregard that, with extreme prejudice. We should be updating it soon and that will go out.

filipesilva on 20 Feb 2017

@filipesilva Can't wait for new documentation :)

splacentino on 21 Feb 2017

Ok thanks @filipesilva!
For your information the latest angular-cli version (1.0.0-beta.32 + @angular/2.4.7) seems to solve the issue. I'm now able to deploy successfully on Heroku!

benoitmugnier on 21 Feb 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._}