I’m new to Angular, and I am neither an expert on NodeJS nor Webpack. I built an app with Angular but when I try to deploy it, ng build
doesn’t seem to be working. The terminal says Building ...
and looks like running but does nothing. I tried many times and waited for long, but it keeps the same: no error, and no other message than Building ...
, until I decide to cancel. Of course, no dist
folder.
These are my current settings:
Angular CLI: 17.3.7
Node: 22.2.0 (Unsupported)
Package Manager: npm 6.14.9
OS: win32 x64
I noticed the Node version says unsupported, and I don’t know whether it might be the cause of the issue. Actually I just upgraded Node from v21 to v22 before starting experiencing these issue, so chances are it’s related. That’s why I tried to downgrade to v21 again, but I’m having issues with nvm
and can’t (I can explain in you guys think node version might be the cause). Node installer didn’t work either, some prompt arguing that I have a newer version and the installation would cancel.
I also generated a clean test app to try and debug what might be the issue, but the result is the same (so it looks like the issue is not related to my “real-world” app). For what is worth, this is the new and clean app’s package.json
(which is probably just boilerplate):
{
"name": "build-test-app",
"version": "0.0.0",
"homepage": "https://github.com/jmlinares2019/angular-deploy-test",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:build-test-app": "node dist/build-test-app/server/server.mjs"
},
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.5",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.5",
"@angular/cli": "^17.3.5",
"@angular/compiler-cli": "^17.3.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"gh-pages": "^6.1.1",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
}
And here, the angular.json
:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"build-test-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/build-test-app",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "build-test-app:build:production"
},
"development": {
"buildTarget": "build-test-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "build-test-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
}
}
As I said, I’m quite new to Angular and don’t really understand much of this last file.
Any ideas? Is there any other info you need?
Thanks.