将Angular 5应用程序部署到Heroku时出现问题

时间：2020-04-10 21:22:10

标签： angular heroku npm

我一直在尝试将Angular 5应用程序部署到Heroku中。 我已经在其他项目中做到了这一点，但是对于这个项目，可能存在一些依赖问题，我不能做同样的事情。

在我的本地计算机上，我可以无任何错误地运行ng build。

另一方面，当Heroku运行此命令（ng build）时，出现以下错误：

-----> Build
remote:        Detected both "build" and "heroku-postbuild" scripts
remote:        Running heroku-postbuild
remote:        
remote:        > remeli-web@0.0.2 heroku-postbuild /tmp/build_aa000f62bacba3344bfd7e2865e0bc78
remote:        > ng build
remote:        
remote: internal/modules/cjs/loader.js:775
remote:     throw err;
remote:     ^
remote: 
remote: Error: Cannot find module '@angular-devkit/core'
remote: Require stack:
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/virtual.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/filtered.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/static.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/index.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/utilities/schematics.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/commands/generate.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/lib/cli/index.js
remote: - /tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/bin/ng
remote:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:677:27)
remote:     at Module.require (internal/modules/cjs/loader.js:830:19)
remote:     at require (internal/modules/cjs/helpers.js:68:18)
remote:     at Object.<anonymous> (/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/virtual.js:10:16)
remote:     at Module._compile (internal/modules/cjs/loader.js:936:30)
remote:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
remote:     at Module.load (internal/modules/cjs/loader.js:790:32)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:703:12)
remote:     at Module.require (internal/modules/cjs/loader.js:830:19) {
remote:   code: 'MODULE_NOT_FOUND',
remote:   requireStack: [
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/virtual.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/filtered.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/tree/static.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular-devkit/schematics/src/index.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/utilities/schematics.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/commands/generate.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/lib/cli/index.js',
remote:     '/tmp/build_aa000f62bacba3344bfd7e2865e0bc78/node_modules/@angular/cli/bin/ng'
remote:   ]
remote: }
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! remeli-web@0.0.2 heroku-postbuild: `ng build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the remeli-web@0.0.2 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.jo13D/_logs/2020-04-10T21_07_21_257Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected

我的 package.json 如下：

{
  "name": "remeli-web",
  "version": "0.0.2",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --disable-host-check --port 4242 -w --proxy-config proxy.conf.json",
    "build": "ng build --env prod --prod --aot",
    "build-homolog": "ng build --env homolog --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@fortawesome/fontawesome-free": "^5.3.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.9",
    "@fortawesome/free-brands-svg-icons": "^5.6.0",
    "@fortawesome/free-solid-svg-icons": "^5.6.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@ngx-share/core": "^5.3.1",
    "@types/promise.prototype.finally": "^2.0.2",
    "angular-calendar": "^0.23.3",
    "angular2-notifications": "^1.0.0",
    "bootstrap": "^4.0.0-beta",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.3",
    "hammerjs": "^2.0.8",
    "install": "^0.10.2",
    "moment": "^2.19.4",
    "ng2-dnd": "^5.0.2",
    "ng2-img-cropper": "^0.9.0",
    "ng2-trim-directive": "^2.1.0",
    "ng2-truncate": "^1.3.11",
    "ngx-bootstrap": "^2.0.0",
    "ngx-infinite-scroll": "^0.8.2",
    "ngx-slick": "^0.1.3",
    "npm": "^5.6.0",
    "pretty-checkbox": "^3.0.3",
    "promise.prototype.finally": "^3.1.0",
    "rxjs": "^5.5.5",
    "ts-md5": "^1.2.2",
    "webpack": "^3.10.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.58",
    "codelyzer": "~4.0.2",
    "file-loader": "^1.1.5",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.13.1",
    "protractor": "~5.2.1",
    "ts-node": "~4.0.1",
    "tslint": "~5.8.0",
    "typescript": "^2.4.2"
  },
  "engines": {
    "node": "12.9.0",
    "npm": "6.13.0"
  }
}

我还尝试添加依赖项（即使我不需要添加依赖项也可以在本地构建项目）。

我运行npm install @angular-devkit/core并获得"@angular-devkit/core": "^9.1.1"

我再次按下heroku，错误更改为：

remote:        > ng build
remote:        
remote:        
remote:        @angular/compiler-cli@5.2.11 requires typescript@'>=2.4.2 <2.5.0' but 2.9.2 was found instead.
remote:        Using this version can result in undefined behaviour and difficult to debug problems.
remote:        
remote:        Please run the following command to install a compatible version of TypeScript.
remote:        
remote:            npm install typescript@'>=2.4.2 <2.5.0'
remote:        
remote:        To disable this warning run "ng set warnings.typescriptMismatch=false".
remote:        
remote:        Date: 2020-04-10T21:19:58.382Z
remote:        Hash: 668a7a095131daade445
remote:        Time: 27626ms
remote:        chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
remote:        chunk {main} main.bundle.js, main.bundle.js.map (main) 889 kB [initial] [rendered]
remote:        chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 399 kB [initial] [rendered]
remote:        chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 277 kB [initial] [rendered]
remote:        chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 9.45 MB [initial] [rendered]
remote: 
remote: ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/sass/app.scss
remote: Module build failed: 
remote:   @return mix($color-base, $color, $level * $theme-color-interval);
remote:          ^
remote:       Argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
remote:       in /tmp/build_b1b8a012dd41e35e651d945fbbda4881/node_modules/bootstrap/scss/_functions.scss (line 96, column 11)
remote: Error: 
remote:   @return mix($color-base, $color, $level * $theme-color-interval);
remote:          ^
remote:       Argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
remote:       in /tmp/build_b1b8a012dd41e35e651d945fbbda4881/node_modules/bootstrap/scss/_functions.scss (line 96, column 11)
remote:     at options.error (/tmp/build_b1b8a012dd41e35e651d945fbbda4881/node_modules/node-sass/lib/index.js:291:26)
remote:  @ ./src/assets/sass/app.scss 4:14-206
remote:  @ multi ./node_modules/ng2-dnd/bundles/style.css ./src/styles.scss ./src/assets/sass/app.scss ./src/assets/slick.css ./src/assets/slick-theme.css ./src/assets/calendar.css ./src/assets/notification.css
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! remeli-web@0.0.2 heroku-postbuild: `ng build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the remeli-web@0.0.2 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.uRy2g/_logs/2020-04-10T21_19_58_443Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected

有人尝试部署到heroku时会遇到类似的错误吗？

3 个答案:

答案 0 :(得分：0)

您的项目中的打字稿版本以及他们使用的Heroku上的版本可能有问题。

如果打字稿版本的差异看起来没有问题，则可以尝试运行：

app.post('/delete',async function (req,res) { await Item.findByIdAndRemove(req.body.checkbox); res.redirect('/somewhere/else'); });

答案 1 :(得分：0)

似乎打字稿版本与建筑生产版本不兼容。

@angular/compiler-cli@5.2.11 requires typescript@'>=2.4.2 <2.5.0' but 2.9.2 was found instead.

您可能想尝试将"typescript": "^2.4.2"从devDependencies移到dependencies部分，然后试一试。

答案 2 :(得分：0)

好吧，我找不到lib依赖项的问题，因此在本地构建应用程序后，我不得不将应用程序部署为静态html。

相关问题
最新问题