Build size grows rom 6+MB to over 48MB when upgrading from Angular CLI 1.7.4 to 6.0.8

[lehtiniemi]

Bug Report or Feature Request (mark with an x)

- [ X ] bug report -> please search issues before submitting
- [ ] feature request

Area

- [ ] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8
Node: 9.4.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.4.9
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.3.2
@angular/cli 6.0.8
@angular/material 6.3.2
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2
webpack 4.8.3

Windows 10, npm version 6.1.0

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

The build size with --prod used to be 6MB+, but with Angular CLI 6.0.8 (and Angular 6), the build size grew to over 48MB.

How should can I help to diagnose this, what could cause this?

[lehtiniemi]

Here's the file list of my build directory, even the styles.js is over 2MB. The other image is how the contents of the styles.js looks like (just a snippet) - it looks like it's not minified at all? When I inspect the files with webpack-bundle-analyzer, on the main.js it says "Stat size 5.13MB, Parsed size 5.63MB, Gzipped size 641.9KB". Should the file be zipped automatically? I'm having the parsed size in the final file.

Snippet from styles.js:

The sizes of the build files in my dist folder:

[clydin]

In 6.0+, --prod is an alias for --configuration=production. Please ensure that the project's production configuration is defined as appropriate for the project's requirements.
A new project's configuration appears as follows:

          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }

[lehtiniemi]

@clydin Ah, these are totally missing from the file. (the file is a result of the conversion from 1.7.4 with ng update).

My configuration file seems to be filled with references to the "prod"-word - should I change all of them into "production"? Even lines like:

"configurations": {
            "prod": {
              "browserTarget": "Paperi 0:build:prod"
            }

Should I change all the prod-words to "production"?

Here's angular.json in full:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Paperi 0": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/lightbox2/dist/css/lightbox.min.css",
              "node_modules/ng2-dnd/bundles/ng2-dnd.umd.js"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
              "node_modules/lightbox2/dist/js/lightbox.min.js"
            ]
          },
          "configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Paperi 0:build"
          },
          "configurations": {
            "prod": {
              "browserTarget": "Paperi 0:build:prod"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Paperi 0:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
              "node_modules/lightbox2/dist/js/lightbox.min.js"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/lightbox2/dist/css/lightbox.min.css",
              "node_modules/ng2-dnd/bundles/ng2-dnd.umd.js"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "Paperi 0-e2e": {
      "root": "",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "Paperi 0:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "Paperi 0",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

[clydin]

Changing them all to production (and adding the options in my previous post to the browser section) should all --prod to function as intended.

Do you happen to have a copy of the original angular-cli.json file before the upgrade? Ideally you shouldn't have to manually edit the configuration.

[lehtiniemi]

Thanks! Here's the file before upgrade:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "E-book platform"
  },
  "apps": [
  {
      "name": "Paperi 0",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "./assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "stylePreprocessorOptions": {
        "includePaths": [
          
        ]
      },
      "styles": [
        "styles.scss",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
        "../node_modules/lightbox2/dist/css/lightbox.min.css",
        "../node_modules/ng2-dnd/bundles/ng2-dnd.umd.js"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/froala-editor/js/froala_editor.pkgd.min.js",
        "../node_modules/lightbox2/dist/js/lightbox.min.js"
        
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

[lehtiniemi]

Thank you for your help, now it builds and the build size is about1MB smaller than with the previous version! I heard the Ivy will reduce sizes even further. So cool.

[clydin]

No problem. I'm glad it is working now. I added a fix that will ensure a production configuration is always present in upgraded projects; should be in the next release (6.1).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}