Deploy ng-2 admin Angular 2 to heroku

Question

I'm trying to deploy my project based on ng2-admin .the Build succeeded but whe i launch heroku open to run the project i got :

Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

Here is the logs:

remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        engines.yarn (package.json):  unspecified (use default)
remote:
remote:        Resolving node version 6.x via semver.io...
remote:        Downloading and installing node 6.11.0...
remote:        Using default npm version: 3.10.10
remote:        Resolving yarn version (latest) via semver.io...
remote:        Downloading and installing yarn (0.24.5)...
remote:        Installed yarn 0.24.5
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (new-signature)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v0.24.5
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        warning fsevents@1.1.1: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning "angular2-datatable@0.6.0" has incorrect peer dependency "@angular/core@^2.0.0".
remote:        warning "angular2-datatable@0.6.0" has incorrect peer dependency "@angular/common@^2.0.0".
remote:        warning "angular2-datatable@0.6.0" has incorrect peer dependency "@angular/platform-browser@^2.0.0".
remote:        warning "ng2-ckeditor@1.1.6" has incorrect peer dependency "@angular/core@^2.1.0".
remote:        warning "ng2-ckeditor@1.1.6" has incorrect peer dependency "@angular/forms@^2.1.0".
remote:        warning "ng2-ckeditor@1.1.6" has incorrect peer dependency "@angular/common@^2.1.0".
remote:        warning "ng2-handsontable@0.48.0" has incorrect peer dependency "@angular/common@^2.3.1".
remote:        warning "ng2-handsontable@0.48.0" has incorrect peer dependency "@angular/compiler@^2.3.1".
remote:        warning "ng2-handsontable@0.48.0" has incorrect peer dependency "@angular/core@^2.3.1".
remote:        warning "ng2-handsontable@0.48.0" has incorrect peer dependency "@angular/forms@^2.3.1".
remote:        [4/4] Building fresh packages...
remote:        Done in 47.14s.
remote:
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 60.3M
remote: -----> Launching...
remote:        Released v3
remote:        https://testngadmin.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/testngadmin.git

My package.json:

{
  "name": "ng2-admin",
  "version": "1.0.0",
  "description": "Angular and Bootstrap 4 Admin Template.",
  "author": "Akveo <[e-mail]>",
  "homepage": "http://akveo.github.io/ng2-admin/",
  "repository": {
    "type": "git",
    "url": "https://github.com/akveo/ng2-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ng2-admin/issues"
  },
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "rimraf": "rimraf",
    "changelog": "standard-changelog",
    "start": "ng serve",
    "start:hmr": "ng serve --hmr",
    "start:aot": "ng serve --aot",
    "start:prod": "ng serve --prod",
    "start:prod:aot": "ng serve --prod --aot",
    "build": "npm run clean:dist && ng build",
    "build:prod": "npm run build -- --prod",
    "build:prod:aot": "npm run build:prod -- --aot",
    "build:ci": "npm run build:prod && npm run build:prod:aot",
    "build:demo": "npm run build:prod:aot -- --base-href \"http://akveo.com/ng2-admin/\"",
    "test": "ng test -sr",
    "test:coverage": "npm run clean:coverage && ng test -sr -cc",
    "lint": "ng lint",
    "lint:styles": "stylelint ./src/app/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "clean:dist": "npm run rimraf -- dist",
    "clean:coverage": "npm run rimraf -- coverage",
    "docs:deploy": "wintersmith build -C docs && gh-pages -d docs/build",
    "docs:serve": "wintersmith preview -C docs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@angular/router": "4.1.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
   "amcharts3": "3.21.2",
    "ammap": "^3.20.7",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6",
    "chart.js": "1.1.1",
    "chartist": "0.10.1",
    "chroma-js": "1.3.3",
    "ckeditor": "4.6.2",
    "core-js": "2.4.1",
    "easy-pie-chart": "2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "3.3.1",
    "google-maps": "3.2.1",
    "ionicons": "2.0.1",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "leaflet": "0.7.7",
    "leaflet-map": "0.2.1",
    "lodash": "4.17.4",
    "ng2-ckeditor": "1.1.6",
    "ng2-completer": "1.3.1",
    "ng2-handsontable": "0.48.0",
    "ng2-slim-loading-bar": "4.0.0",
    "ng2-smart-table": "1.0.3",
    "ng2-tree": "2.0.0-alpha.5",
    "ngx-uploader": "2.2.5",
    "normalize.css": "6.0.0",
    "roboto-fontface": "0.7.0",
    "rxjs": "5.4.0",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@angular/cli": "1.0.4",
    "@angular/compiler-cli": "4.1.3",
    "@types/fullcalendar": "2.7.40",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "2.0.41",
    "@types/jquery.slimscroll": "1.3.30",
    "@types/lodash": "4.14.61",
    "@types/node": "6.0.69",
    "codelyzer": "3.0.1",
    "gh-pages": "0.12.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.0",
    "rimraf": "2.6.1",
    "standard-changelog": "1.0.1",
    "stylelint": "7.10.1",
    "ts-node": "2.1.2",
    "tslint": "5.2.0",
    "tslint-eslint-rules": "4.0.0",
    "tslint-language-service": "0.9.6",
    "typescript": "2.3.2",
    "typogr": "0.6.6",
    "underscore": "1.8.3",
    "wintersmith": "2.2.5",
    "wintersmith-sassy": "1.1.0"
  }
}

Answer 1

have you tried adding the following line to the scripts section?

"postinstall": "ng build --aot -prod"

I think that you also need to move:

"@angular/cli": "1.0.4",
"@angular/compiler-cli": "4.1.3",

to the dependencies section for this to work.

Hope it helps.

Answer 2

i solve the problem,

1. delete /dist from .gitignore
2. run the project localy in production with npm run build:prod to generate a /dist folder

3. modify package.json file by adding

   "engines": { "node": "6.9.1", "npm": "3.10.8" } and
   "start": "http-server dist/",
   "preinstall": "npm install -g http-server" in scripts