Error while deploying on CF: "ERR The serve command requires to be run in an Angular project, but a project definition could not be found."

Question

I want to deploy my Angular Application to Cloud-Foundry.

Below you can find the current package.json located in my dist folder:

{
"name": "showroom-app",
"version": "0.0.0",
"engines": {
    "node": "14.15.3",
    "npm": "6.13.7"
},
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build && cp -r ./cf/* ./dist",
  "test": "echo \"Error: no test specified\"",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"dependencies": {
  "@angular/animations": "~9.1.0",
  "@angular/cli": "~9.1.0",
  "@angular/compiler-cli": "~9.1.0",
  "@angular/common": "~9.1.0",
  "@angular/compiler": "~9.1.0",
  "@angular/core": "~9.1.0",
  "@angular/forms": "~9.1.0",
  "@angular/platform-browser": "~9.1.0",
  "@angular/platform-browser-dynamic": "~9.1.0",
  "@angular/router": "~9.1.0",
  "karma-coverage": "^2.0.3",
  "rxjs": "~6.5.4",
  "tslib": "^1.10.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.901.0",
  "@angular/language-service": "~9.1.0",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
  "codelyzer": "^5.1.2",
  "jasmine-core": "~3.5.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "^4.4.1",
  "karma-chrome-launcher": "^3.1.0",
  "karma-coverage-istanbul-reporter": "~2.1.0",
  "karma-jasmine": "^3.0.3",
  "karma-jasmine-html-reporter": "^1.4.2",
  "protractor": "~5.4.3",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~3.8.3"
}

}

My manifest.yml:

---
applications:
- name: npmPipeline
  buildpack: https://github.com/cloudfoundry/nodejs-buildpack
  memory: 2048MB
  disk_quota: 2048MB
  dea_next.staging_disk_limit_mb:
    description: "Disk limit in MB for staging tasks"
    default: 4096
  instances: 1
  timeout: 360
random-route: true
path: ./

After executing cf push within the dist folder, the following error occurs:

2021-01-05T14:44:50.87+0100 [APP/PROC/WEB/0] OUT > hello-world@0.0.0 start /home/vcap/app
   2021-01-05T14:44:50.87+0100 [APP/PROC/WEB/0] OUT > ng serve
   2021-01-05T14:44:51.53+0100 [APP/PROC/WEB/0] ERR The serve command requires to be run in an Angular project, but a project definition could not be found.
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! code ELIFECYCLE
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! errno 1
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! hello-world@0.0.0 start: `ng serve`
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! Exit status 1
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! 
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! Failed at the hello-world@0.0.0 start script.
   2021-01-05T14:44:51.54+0100 [APP/PROC/WEB/0] ERR npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
   2021-01-05T14:44:51.67+0100 [APP/PROC/WEB/0] ERR npm ERR! A complete log of this run can be found in:
   2021-01-05T14:44:51.67+0100 [APP/PROC/WEB/0] ERR npm ERR!     /home/vcap/app/.npm/_logs/2021-01-05T13_44_51_544Z-debug.log

I already followed this proposed solution by updating the @angular/cli, but nothing changed ..

Any idea how to approach this? Thank you! :)

Cheers, Matthias

Answer 1

Ok, a few things here.

1. This is not valid in your manifest.yml.

     dea_next.staging_disk_limit_mb:
       description: "Disk limit in MB for staging tasks"
       default: 4096
   

   Just remove that. disk_quota: 1024M is how you set the disk quota for your app, which you also have, and it applies to both staging & runtime.

2. You shouldn't reference the master branch of a buildpack. That can change day-to-day so it's not stable. Either reference the standard buildpack, like nodejs_buildpack or reference a release tag like buildpack: https://github.com/cloudfoundry/nodejs-buildpack#v1.7.39. That will ensure you get something more reliable.

3. Make sure you're not referencing any dev dependencies when you try to start your app. The nodejs buildpack will not install dev dependencies. It treats your app as a production app, so dev deps are skipped.

4. Watch the directory from which you push your application. The cf cli defaults to pushing from the current directory. The platform will run your start command from basically the same directory where you push. If you need to push a specific directory, you can either change directories or use the -p flag or path: in the manifest to change what is pushed up.

   For example, if you're using the nodejs buildpack, you'd want to push from the root of your project, where package.json exists. This is because the nodejs buildpack needs package.json and everything to run your app. However, if you use the staticfile buildpack then you'd push from your dist/ directory (or where ever your built/prod files end up).

5. For most use cases, it's more efficient to build your site and push up just the static files (minimized, zipped, all that stuff). You can then use the staticfile buildpack to push your app. It will get deployed with Nginx & can run with a very small memory footprint (64M is plenty).

   A tip when using the static file buildpack, enable the push state support. This will configure Nginx to support client-side routing & fancy URLs.