Angular: ng build not putting components in dist folder

Question

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?

This is totally normal when you are building an application. Maybe the previous project was a library? As far as I can tell everything works as expected. What are you trying to do with the built components? — JSON Derulo
– JSON Derulo, Commented Sep 4, 2024 at 13:55
This is because all of your components are in main.js or chunks. — Bojan Kogoj
– Bojan Kogoj, Commented Sep 4, 2024 at 14:02
@BojanKogoj, and why is this te case? As it was not in my previous project. When opening the index.html in the browser I get an empty page and 404's for missing files — Pvangerrevink
– Pvangerrevink, Commented Sep 4, 2024 at 14:04
Did you migrate to esbuild? Btw you can use "namedChunks": true, in angular.json — Bojan Kogoj
– Bojan Kogoj, Commented Sep 4, 2024 at 14:05
Not really an expert. But i only made a new project with ng new projectname. Same versions as the previous project. I did not migrate or update anything. — Pvangerrevink
– Pvangerrevink, Commented Sep 4, 2024 at 14:08

Grogu · Accepted Answer · 2024-09-04 21:57:42Z

0

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

answered Sep 4, 2024 at 21:57

Grogu

5323 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pvangerrevink Over a year ago

Thanks. My previous application was angular 18. The same for this one. The previous has all the components as a folder in the dist. This one does not. They both work though.. this application did not work because of a mistake in the paths and base href. But i still dont understand why the previous application gives all the components in the dist and this one does not.

Grogu Over a year ago

If you have still access to your old app code, you should take a look at its angular json. They must have changed the default build configuration to put the development one, or changed the parameters of the production one, which is used by default

Eliseo · Accepted Answer · 2024-09-05 07:08:11Z

0

@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 use open 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.

edited Sep 5, 2024 at 7:08

answered Sep 5, 2024 at 6:55

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular: ng build not putting components in dist folder

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related