I’ve build an angular application which is working as expected with ng serve.
When using ng build, i get the project in the dist file. But all the components are missing. I only get the images folder from the assets, and files like the index.html, main.js, polyfill.js etc. But all my component folders are missing.
In a previous project i did get all the files with ng build. I am not getting an error when using ng build.
This is my angular.json:
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"wwna3kannenapp": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/kannenapp",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "5MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kB",
"maximumError": "10kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "wwna3kannenapp:build:production"
},
"development": {
"buildTarget": "wwna3kannenapp:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
}Pasted it as a snippet as it would not let me paste it correctly as a code block.
This is the content of my dist folder:
My package.json:
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/fire": "^18.0.1",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"bootstrap": "^5.3.3",
"firebase": "^10.13.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
How do i resolve this and get a complete build in my dist folder?
5
Previously, build was launched by default with development configuration. Now this is launched by default with production configuration.
Production configuration applies several build optimizations, including: Bundling files, Minimizing excess whitespace, Removing comments and dead code, Minifying code to use short mangled names. Production code makes the code less human readable and is what you see now. This is totally normal and is the recommanded behavior for deploying your files.
https://angular.dev/reference/configs/workspace-config#alternate-build-configurations
https://angular.dev/cli/build
You must have been working on an old project, as this behavior has been changed since angular v12-14
https://github.com/angular/angular-cli/pull/20128
If needed for your local developments, you can still get the other behavior with ng build --configuration development
2
@Pvangerrevink, you need a “server” to “run” the app, not only a navigator (in the navigator address should appear some like http://localhost:4200/, not file:///C:/....
-
If you’re using Visual studio code you can “run” select index.html
with the right button of mouse and useopen with Live server -
Others IDEs have a similar option.
-
You can also use the lite-server.
Here there are a “step-by step” to install if it’s not clear
the installation in the first link.