I've gone through a ton of old StackOverflow posts and followed instructions for every one of them but none of them work. I'm just trying to deploy a static one page site with no backend, but its coming up with an application error.
I'm using Heroku CLI and the deploy is working, but the site doesn't work and when I check the "heroku logs" this is the output I'm getting:
2023-01-09T13:58:20.102130+00:00 app[web.1]: sh: 1: ng: not found
2023-01-09T13:58:20.229260+00:00 heroku[web.1]: Process exited with status 127
2023-01-09T13:58:20.282782+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-09T13:58:20.287984+00:00 heroku[web.1]: State changed from crashed to starting
This is my current package.json:
{
"name": "fmentor-country",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^15.0.2",
"@angular/animations": "^15.0.0",
"@angular/cdk": "^15.0.4",
"@angular/common": "^15.0.0",
"@angular/compiler": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/forms": "^15.0.0",
"@angular/material": "^15.0.4",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/material": "^5.11.3",
"typescript": "~4.8.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0",
"@angular/cli": "~15.0.2",
"@angular/compiler-cli": "^15.0.0"
},
"devDependencies": {
"@angular/cli": "~15.0.2",
"@angular/compiler-cli": "^15.0.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.8.2"
},
"engines": {
"node": "16.13.1",
"npm": "8.5.2"
}
}
I've gone through almost every StackOverflow post on google and nothing is working. I've tried:
Angular 5 Deploy to Heroku Fails with Application Error H10
In your package.json, copy
"@angular/cli": "1.7.3"", "@angular/compiler-cli": "^5.2.0"
from devDependencies to dependencies.
Create a postinstall script in package.json -
Under "scripts", add a postinstall command:
"postinstall": "ng build --aot --prod"
This tells Heroku to build the application using Ahead Of Time (AOT) compiler and make it production-ready. This will create a dist folder where all html and javascript converted version of our app will be launched from.
Add node and npm engines -
You will need to add the Node and NPM engines that Heroku will use to run your application. Preferably, it should be same version you have on your machine. So, run node -v and npm -v to get the correct version and include it in your package.json file like so:
"engine": { "node": "8.9.4", "npm": "5.6.0" }
Copy typescript to dependencies -
Copy "typescript": "~2.5.3" from devDependencies to dependencies to also inform Heroku what typescript version to use.
However this line:
Under "scripts", add a postinstall command:
"postinstall": "ng build --aot --prod"
gets me a failed build with the output saying:
remote: Error: Unknown argument: prod
remote:
remote: -----> Build failed
its the same error when I replace "postinstall" with "heroku-postbuild" too. So I took it out of the package.json and hoped the dependencies alone would be enough to fix it but it doesn't.
Similar advice is found in multiple other SO posts like:
Heroku deploy issue sh: 1: ng: not found?
you can let heroku build your dev dependencies by setting environment: NPM_CONFIG_PRODUCTION to false. (how?)
or you can move (angular 9)
@angular/cli,
@angular/compiler-cli
@angular-devkit/build-angular
typescript
from devDependencies to dependencies.
I didn't want to do the:
NPM_CONFIG_PRODUCTION = false
thing because of this GH post saying its problematic
https://github.com/npm/npm/issues/14168
and
Heroku deployment failed? How to deploy Angular App + NodeJs properly?
The answer is in this Angular CLI issue.
In it, they recommend that within your package.json file:
Move
"@angular/cli": "7.3.1",
"@angular/compiler-cli": "7.2.4",
from the "devDependencies" to "dependencies", "as that's the missing ng error. Also, change postinstall for heroku-postbuild as it achieves the same thing, but doesn't trigger a build when you're installing deps locally"
This one too:
Failed Heroku deploy: sh: 1: ng: not found
Are there any updates to these answers? Or is my case different because it's only a static site with no backend so the fix instructions aren't the same?
How do I get Heroku to recognize Angular's "ng" command?
