While deploying my Angular app on Heroku, I'm receiving only 'Not found' information, and additional in console ("Failed to load resource: the server responded with a status of 404").
在Heroku上部署我的Angular应用程序时，我只收到“未找到”信息，并在控制台中收到其他信息（“无法加载资源：服务器响应状态为404”）。
Here's whole Heroku build log which I'm receiving:
这是我收到的整个Heroku构建日志：
-----> 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): 8.11.2
engines.npm (package.json): 6.1.0
Resolving node version 8.11.2...
Downloading and installing node 8.11.2...
Bootstrapping npm 6.1.0 (replacing 5.6.0)...
npm 6.1.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)
> aplikacja@0.0.0 postinstall /tmp/build_d1dd43479bc7dcb9ae65082b720aff2b
> ng build --aot=prod
31% building modules 181/189 modules 8 active …ules/rxjs/_esm5/inter Date: 2018-06-08T23:55:35.459Z
Hash: a1abfaf18b529ef61e77
Time: 12592ms
chunk {main} main.js, main.js.map (main) 27.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.5 MB [initial] [rendered]
audited 22409 packages in 27.121s
found 7 vulnerabilities (1 low, 5 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Pruning devDependencies
removed 844 packages and audited 9173 packages in 12.907s
found 0 vulnerabilities
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 48.4M
-----> Launching...
Released v7
https://aplikacja-angular.herokuapp.com/ deployed to Heroku
I made all required changes for deployment on Heroku in my package.json and it's looking like this:
我在package.json中对Heroku进行了部署所需的所有更改，它看起来像这样：
{
"name": "aplikacja",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot=prod"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cli": "~6.0.8",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/compiler-cli": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"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.8",
"@angular/language-service": "^6.0.3",
"@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": "^2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"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"
},
"engines": {
"node": "8.11.2",
"npm": "6.1.0"
}
}
I also tried setting "postinstall": "ng build --aot -prod" but it also was not working.
我也试过设置“postinstall”：“ng build --aot -prod”但它也没有用。
Here's my server.js code:
这是我的server.js代码：
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
app.listen(process.env.PORT || 8080);
I'am quite confused how to fix that issue. Thanks in advance.
我很困惑如何解决这个问题。提前致谢。
1 个解决方案
#1
0
If you're application was generated by version 6.x.x of the @angular/cli, then your build is likely not simply in the dist folder. If you look for the outputPath field in the angular.json it probably says dist/aplikacja. With that in mind you'll likely want to update your server.js to...
如果您的应用程序是由@ angular / cli的6.x.x版生成的，那么您的构建可能不仅仅是在dist文件夹中。如果你在angular.json中查找outputPath字段，它可能会说dist / aplikacja。考虑到这一点，您可能希望将server.js更新为...
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/aplikacja'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/aplikacja/index.html'));
});
app.listen(process.env.PORT || 8080);
#1
0
If you're application was generated by version 6.x.x of the @angular/cli, then your build is likely not simply in the dist folder. If you look for the outputPath field in the angular.json it probably says dist/aplikacja. With that in mind you'll likely want to update your server.js to...
如果您的应用程序是由@ angular / cli的6.x.x版生成的，那么您的构建可能不仅仅是在dist文件夹中。如果你在angular.json中查找outputPath字段，它可能会说dist / aplikacja。考虑到这一点，您可能希望将server.js更新为...
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/aplikacja'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/aplikacja/index.html'));
});
app.listen(process.env.PORT || 8080);