将Angular 2部署到Heroku

时间:2017-06-22 03:55:19

标签: angular heroku angular2-aot

需要帮助部署使用angular-cli创建的angular 2 app。我的应用程序在本地端口4200上运行,我有代理设置将我的url请求路由到localhost:8080,我的后端服务器(spring-boot app)正在运行。

我已成功将我的后端服务器部署到heroku。现在我想将我的角度应用程序部署到heroku。

执行“ng build --aot -prod”时,构建失败并显示错误“错误时出现错误遇到静态解析符号值。调用函数'ɵmakeDecorator',不支持函数调用。考虑更换函数或lambda引用导出函数,解析符号Injectable in /tmp/build_cc056824e4c062306cc02ac5a41c4dc8/node_modules/angular-datatables/node_modules/@angular/core/core.d.ts“。

以下是package.json文件

{
  "name": "client-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng server --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "preinstall": "npm install -g http-server",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-datatables": "^4.1.0",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.15",
    "datatables.net-dt": "^1.10.15",
    "jquery": "^3.2.1",
    "ng2-uploader": "^2.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@types/datatables.net": "^1.10.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  },
  "engines": {
  "node": "6.10.3",
  "npm": "3.10.10"
  },
  "devDependencies": {

  }
}

和我的proxy.conf.json文件 -

{
    "/api":{
    "target" : "http://localhost:8080",
    "secure" : false
    }
}

1 个答案:

答案 0 :(得分:0)

请检查您的Procfile - 您需要创建一个这样的

Heroku需要一个ProcFile来部署它。

ProcFile:

web: tsc && lite-server 

以上是我的配置。

然后将其替换为package.json

中的行

"启动":" ng服务器--proxy-config proxy.conf.json",

并将其更改为web:ng server --proxy-config proxy.conf.json 在ProcFile中 您的ProcFile应如下所示

web: ng-server --proxy-config proxy.conf.json

将更改推送到heroku的git,如下所示

git add .
git commit -m 'Procfile Updated'
git push heroku master

然后在上传git提交后输入cli

heroku ps:scale web = 1 测试在本地计算机上运行应用程序

 heroku local web

如果应用无法正常运行

运行

heroku logs

检查您的日志输出是否有任何错误。

最后,如果应用程序在本地运行良好 然后做

heroku open

这将从heroku云运行应用程序。

希望有所帮助。