将ng-2管理员Angular 2部署到heroku [英] Deploy ng-2 admin Angular 2 to heroku
本文介绍了将ng-2管理员Angular 2部署到heroku的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图根据 ng2-admin 部署我的项目。构建成功但是当我启动heroku打开运行我得到的项目：
$ b
应用程序错误应用程序和您的页面发生错误
无法送达。如果您是应用程序所有者，请查看日志
了解详情。
以下是日志：
remote：压缩源文件...完成。
remote：建筑来源：
remote：
remote：-----> Node.js应用程序检测到
remote：
remote：----->创建运行时环境
remote：
remote：NPM_CONFIG_LOGLEVEL =错误
remote：NPM_CONFIG_PRODUCTION = true $ b $ remote：NODE_VERBOSE = false
remote：NODE_ENV =生产
remote ：NODE_MODULES_CACHE = true
remote：
remote：----->安装二进制文件
remote：engines.node（package.json）：未指定
remote：engines.npm（package.json）：unspecified（使用默认值）
remote：engines.yarn（package。 json）：unspecified（使用默认值）
remote：
remote：通过semver.io解析节点版本6.x ...
remote：下载和安装节点6.11.0 ...
remote：使用默认的npm版本：3.10.10
remote：通过semver.io解析纱线版本（最新）...
remote：下载和安装纱线（0.24.5）...
remote：安装的纱线0.24.5
遥控器：
遥控器：----->恢复缓存
remote：跳过缓存恢复（新签名）
remote：
remote：----->建立依赖关系
remote：安装节点模块（yarn.lock）
remote：yarn install v0.24.5
remote：[1/4]正在解析程序包...
remote：[ 2/4]正在获取软件包...
remote：warning fsevents@1.1.1：平台linux与此模块不兼容。
remote：infofsevents@1.1.1是一个可选的相关性和失败的兼容性检查。从安装中排除它。
remote：[3/4]链接依赖关系...
remote：警告angular2-datatable@0.6.0具有不正确的对等关系@ angular / core @ ^ 2.0.0。
remote：警告angular2-datatable@0.6.0具有不正确的对等关系@ angular / common @ ^ 2.0.0。
remote：警告angular2-datatable@0.6.0具有不正确的对等关系@ angular / platform-browser @ ^ 2.0.0。
remote：警告ng2-ckeditor@1.1.6具有不正确的对等关系@ angular / core @ ^ 2.1.0。
remote：警告ng2-ckeditor@1.1.6具有不正确的对等关系@ angular / forms @ ^ 2.1.0。
remote：警告ng2-ckeditor@1.1.6具有不正确的对等关系@ angular / common @ ^ 2.1.0。
remote：警告ng2-handsontable@0.48.0具有不正确的对等关系@ angular / common @ ^ 2.3.1。
remote：警告ng2-handsontable@0.48.0具有不正确的对等关系@ angular / compiler @ ^ 2.3.1。
remote：警告ng2-handsontable@0.48.0具有不正确的对等关系@ angular / core @ ^ 2.3.1。
remote：警告ng2-handsontable@0.48.0具有不正确的对等关系@ angular / forms @ ^ 2.3.1。
remote：[4/4]建立新鲜软件包...
remote：以47.14s完成。
remote：
remote：----->缓存构建
remote：清除以前的节点缓存
remote：保存2个cacheDirectories（默认）：
remote： - node_modules
remote： - bower_components（不需要缓存）
远程：
remote：----->建立成功！
remote：----->发现进程类型
remote：Procfile声明类型 - > （无）
remote：buildpack的默认类型 - > web
remote：
remote：----->压缩...
remote：完成：60.3M
remote：----->启动...
remote：已发布v3
remote：https：//testngadmin.herokuapp.com/部署到Heroku
remote：
remote：正在验证部署...已完成。
到https://git.heroku.com/testngadmin.git
我的包。 json：
{
name：ng2-admin，
version： 1.0.0，
description：Angular and Bootstrap 4 Admin Template。，
author：Akveo< contact@akveo.com>，
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服务 - 产品 - 完整，
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&& amp ; gh-pages -d docs / build，
docs：serve：wintersmith预览-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，
@角度/平台服务器：4.1.3，
@ angular / router：4.1.3，
@ ng-bootstrap / ng-bootstrap：1.0.0- 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-
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，
量角器：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，
typecript：2.3.2，
typogr：0.6.6，
下划线：1.8.3，
wintersmith：2.2.5 ，
wintersmith-sassy：1.1.0
}
}
解决方案
我解决了问题，
- 删除/ dist from .gitignore 运行
- 运行使用npm生成生成的项目build build：prod to
生成一个/ dist文件夹
-
通过添加
修改package.json文件
engines：{
node：6.9.1，
npm：3.10.8
}
和
start：http-server dist /，
preinstall：npm install -g http-server
in脚本
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 <contact@akveo.com>",
"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"
}
}
解决方案
i solve the problem,
- delete /dist from .gitignore
- run the project localy in production with npm run build:prod to generate a /dist folder
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
这篇关于将ng-2管理员Angular 2部署到heroku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
