Question

How to deploy my angular 18 app as static site in App platform

Posted on August 31, 2024
Angular Node.js Managed web/app hosting App Platform
Asked by Deepak surya

I am trying to host an Angular 18 app in App Platform but I am getting npm error i think npm install --force will solve it but I do not know how to do it any idea how to proceed

› configuring custom build command to be run at the end of the build:
[2024-08-31 14:53:47]    │ npm run build
[2024-08-31 14:53:47] 
[2024-08-31 14:53:47] ╭──────────── buildpack detection ───────────╼
[2024-08-31 14:53:47] │  › using Ubuntu 22.04 stack
[2024-08-31 14:53:47] │ Detected the following buildpacks suitable to build your app:
[2024-08-31 14:53:47] │ 
[2024-08-31 14:53:47] │    heroku/nodejs-engine   v1.5.6  
[2024-08-31 14:53:47] │    digitalocean/node      v0.4.0  (Node.js)
[2024-08-31 14:53:47] │    digitalocean/procfile  v0.0.4  (Procfile)
[2024-08-31 14:53:47] │    digitalocean/custom    v0.1.2  (Custom Build Command)
[2024-08-31 14:53:47] │ 
[2024-08-31 14:53:47] │ For documentation on the buildpacks used to build your app, please see:
[2024-08-31 14:53:47] │ 
[2024-08-31 14:53:47] │    Node.js  v0.4.0  https://do.co/apps-buildpack-node
[2024-08-31 14:53:47] ╰─────────────────────────────────────────────╼
[2024-08-31 14:53:47] 
[2024-08-31 14:53:47] ╭──────────── app build ───────────╼
[2024-08-31 14:53:47] │ [INFO] Node.js Buildpack
[2024-08-31 14:53:47] │ [INFO] Installing toolbox
[2024-08-31 14:53:47] │ [INFO] - yj
[2024-08-31 14:53:49] │ 
[2024-08-31 14:53:49] │ [Installing Node]
[2024-08-31 14:53:49] │ [INFO] Getting Node version
[2024-08-31 14:53:49] │ [INFO] Resolving Node version
[2024-08-31 14:53:55] │ [INFO] Downloading and extracting Node v20.17.0
[2024-08-31 14:54:14] │ 
[2024-08-31 14:54:14] │ [Parsing package.json]
[2024-08-31 14:54:14] │ [INFO] Parsing package.json
[2024-08-31 14:54:15] │ Project contains package-lock.json, using npm
[2024-08-31 14:54:16] │ Using npm v10.8.2. To configure a different version of npm, set the engines.npm property in package.json.
[2024-08-31 14:54:16] │   See https://do.co/apps-buildpack-node for further instructions.
[2024-08-31 14:54:16] │ Installing node_modules using npm (from package-lock.json)
[2024-08-31 14:54:16] │ Running npm ci
[2024-08-31 14:54:16] │ 
[2024-08-31 14:54:17] │ npm error code ERESOLVE
[2024-08-31 14:54:17] │ npm error ERESOLVE could not resolve
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error While resolving: @angular/compiler-cli@18.1.2
[2024-08-31 14:54:17] │ npm error Found: @angular/compiler@18.0.6
[2024-08-31 14:54:17] │ npm error node_modules/@angular/compiler
[2024-08-31 14:54:17] │ npm error   @angular/compiler@"^18.0.0" from the root project
[2024-08-31 14:54:17] │ npm error   peer @angular/compiler@"18.0.6" from @angular/platform-browser-dynamic@18.0.6
[2024-08-31 14:54:17] │ npm error   node_modules/@angular/platform-browser-dynamic
[2024-08-31 14:54:17] │ npm error     @angular/platform-browser-dynamic@"^18.0.0" from the root project
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error Could not resolve dependency:
[2024-08-31 14:54:17] │ npm error peer @angular/compiler@"18.1.2" from @angular/compiler-cli@18.1.2
[2024-08-31 14:54:17] │ npm error node_modules/@angular/compiler-cli
[2024-08-31 14:54:17] │ npm error   dev @angular/compiler-cli@"^18.0.0" from the root project
[2024-08-31 14:54:17] │ npm error   peer @angular/compiler-cli@"^18.0.0" from @angular-devkit/build-angular@18.0.7
[2024-08-31 14:54:17] │ npm error   node_modules/@angular-devkit/build-angular
[2024-08-31 14:54:17] │ npm error     dev @angular-devkit/build-angular@"^18.0.7" from the root project
[2024-08-31 14:54:17] │ npm error   3 more (@angular/build, @angular/localize, @ngtools/webpack)
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error Conflicting peer dependency: @angular/compiler@18.1.2
[2024-08-31 14:54:17] │ npm error node_modules/@angular/compiler
[2024-08-31 14:54:17] │ npm error   peer @angular/compiler@"18.1.2" from @angular/compiler-cli@18.1.2
[2024-08-31 14:54:17] │ npm error   node_modules/@angular/compiler-cli
[2024-08-31 14:54:17] │ npm error     dev @angular/compiler-cli@"^18.0.0" from the root project
[2024-08-31 14:54:17] │ npm error     peer @angular/compiler-cli@"^18.0.0" from @angular-devkit/build-angular@18.0.7
[2024-08-31 14:54:17] │ npm error     node_modules/@angular-devkit/build-angular
[2024-08-31 14:54:17] │ npm error       dev @angular-devkit/build-angular@"^18.0.7" from the root project
[2024-08-31 14:54:17] │ npm error     3 more (@angular/build, @angular/localize, @ngtools/webpack)
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error Fix the upstream dependency conflict, or retry
[2024-08-31 14:54:17] │ npm error this command with --force or --legacy-peer-deps
[2024-08-31 14:54:17] │ npm error to accept an incorrect (and potentially broken) dependency resolution.
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error
[2024-08-31 14:54:17] │ npm error For a full report see:
[2024-08-31 14:54:17] │ npm error /home/apps/.npm/_logs/2024-08-31T14_54_16_233Z-eresolve-report.txt
[2024-08-31 14:54:17] │ npm notice
[2024-08-31 14:54:17] │ npm notice New patch version of npm available! 10.8.2 -> 10.8.3
[2024-08-31 14:54:17] │ npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3
[2024-08-31 14:54:17] │ npm notice To update run: npm install -g npm@10.8.3
[2024-08-31 14:54:17] │ npm notice
[2024-08-31 14:54:17] │ npm error A complete log of this run can be found in: /home/apps/.npm/_logs/2024-08-31T14_54_16_233Z-debug-0.log
[2024-08-31 14:54:17] │ 
[2024-08-31 14:54:17] │ unable to invoke layer creator
[2024-08-31 14:54:17] │ installing node_modules: exit status 1
[2024-08-31 14:54:17] │ ERROR: failed to build: exit status 1
[2024-08-31 14:54:17] │ 
[2024-08-31 14:54:17] │ 
[2024-08-31 14:54:17] │ For documentation on the buildpacks used to build your app, please see:
[2024-08-31 14:54:17] │ 
[2024-08-31 14:54:17] │    Node.js  v0.4.0  https://do.co/apps-buildpack-node
[2024-08-31 14:54:17] │ 
[2024-08-31 14:54:17] │  ✘ build failed
[]

console.log("Hello, world!");

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• September 3, 2024

Accepted Answer

Hi there,

Hey Deepak,

Since you mentioned the need to use npm install --force, you can configure this directly in the App Platform’s build settings.

Go to your App on the DigitalOcean dashboard.
Click on the “Settings” tab.
Look for the Build Command section.
Modify the build command to include npm install --force. It should look something like this:
```
npm install --force && npm run build
```

This tells the App Platform to force the installation of dependencies before building your app.

On another note, in the build log you provided, you can see the Node.js buildpack being used. To ensure everything works smoothly, make sure your app is using the right Node.js version by specifying it in your package.json:

"engines": {
  "node": ">=20.17.0",
  "npm": ">=10.8.2"
}

https://docs.digitalocean.com/products/app-platform/reference/buildpacks/nodejs/

If your Angular app is purely a frontend project, consider configuring the App Platform to treat it as a static site. This might simplify the deployment process and reduce potential errors:

In the “Build & Run” section, set the build command to npm run build.
Set the run command to serve the static files (for example, using serve -s dist if you’re using a static server).

Good luck with your deployment and let me know how it goes!

- Bobby