web-dev-qa-db-ja.com

AngularアプリをHerokuにデプロイし、ビルドは成功しましたが、ブラウザーで404が見つからないことが表示されます

こんにちは私はHerokuにアプリをデプロイしようとしている初心者です。以前にアプリのデプロイに成功しましたが、何らかの理由で今回は何も機能しません。このブログの手順を完全に実行しました： https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

私は最新バージョンのangular and node：
"@ angular/cli"： "^ 6.0.1"、 "@ angular/compiler-cli"： "^ 6.0.1"、 "node"： "10.1.0"、 "npm"： " 6.0.0 "

以下は、参照用のビルドログとpackage.jsonファイルです。エラーはありませんが、デプロイ後にアプリが機能しません:(助けてください!!

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  10.1.0
       engines.npm (package.json):   6.0.0

       Resolving node version 10.1.0...
       Downloading and installing node 10.1.0...
       Bootstrapping npm 6.0.0 (replacing 5.6.0)...
       npm 6.0.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > [email protected] install /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > [email protected] postinstall /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b
       > ng build --aot

      39% building modules 245/251 modules       Date: 2018-05-11T17:54:52.577Z
       Hash: a1e28c3c7551108d3a72
       Time: 13703ms
       chunk {main} main.js, main.js.map (main) 134 kB [initial] [rendered]
       chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
       chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
       chunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]
       chunk {vendor} vendor.js, vendor.js.map (vendor) 3.03 MB [initial] [rendered]
       added 116 packages from 166 contributors, removed 24 packages, updated 41 packages and moved 7 packages in 54.687s
       [!] 13 vulnerabilities found [21934 packages audited]
       Severity: 3 low | 5 moderate | 5 high
       Run `npm audit` for more detail

-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 806 packages in 12.697s
       [+] no known vulnerabilities found [9183 packages audited]

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 52.6M
-----> Launching...
       Released v16
       https://c-clin-ng-chatbots.herokuapp.com/ deployed to Heroku

package.jsonファイル:(ビルドログに> ng build --aot -prod不明なオプション： '-pというエラーが表示されるため、ng build --aot-prodの代わりにngbuild--aotを使用する必要があります。 '。これは以前のアプリで機能しました。）

{
  "name": "angular-chatbot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "TypeScript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "TypeScript": "~2.7.2"
  },
  "engines": {
    "node": "10.1.0",
    "npm": "6.0.0"
  }
}
node.jsangularherokudeploymentangular6
7
catherine

問題は_server.js_にあると思います：

_app.use(express.static(_ $ {__ dirname}/front-end/dist/_));_

_app.get('*', (req, res) => {
    res.sendFile(`./front-end/dist/index.html`); // load the single view file (angular will handle the page changes on the front-end)
});
_

ここで、appはconst app = express();です。

明らかに、distフォルダへのパスを変更します。

5
DrNio