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

lehtiniemi · 2018-07-02T19:13:58Z

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?

The text was updated successfully, but these errors were encountered:

lehtiniemi · 2018-07-02T19:40:06Z

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 · 2018-07-03T00:04:36Z

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 · 2018-07-03T09:57:48Z

@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 · 2018-07-03T11:56:32Z

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 · 2018-07-03T12:35:40Z

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 · 2018-07-03T12:41:52Z

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.

Fixes: angular#11431

clydin · 2018-07-03T14:06:05Z

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).

Fixes: #11431

angular-automatic-lock-bot · 2019-09-08T08:41:33Z

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.}

clydin added the area: schematics/angular label Jul 3, 2018

clydin added a commit to clydin/angular-cli that referenced this issue Jul 3, 2018

fix(@schematics/angular): ensure production configuration when migrating

8bddac6

Fixes: angular#11431

clydin mentioned this issue Jul 3, 2018

fix(@schematics/angular): ensure production configuration when migrating #11438

Merged

clydin closed this as completed in #11438 Jul 3, 2018

clydin added a commit that referenced this issue Jul 3, 2018

fix(@schematics/angular): ensure production configuration when migrating

e0720b7

Fixes: #11431

clydin added a commit that referenced this issue Jul 9, 2018

fix(@schematics/angular): ensure production configuration when migrating

c3ad789

Fixes: #11431

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lehtiniemi commented Jul 2, 2018 •

edited

lehtiniemi commented Jul 2, 2018 •

edited

clydin commented Jul 3, 2018 •

edited

lehtiniemi commented Jul 3, 2018 •

edited

clydin commented Jul 3, 2018

lehtiniemi commented Jul 3, 2018

lehtiniemi commented Jul 3, 2018

clydin commented Jul 3, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

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

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

Comments

lehtiniemi commented Jul 2, 2018 • edited

Bug Report or Feature Request (mark with an x)

Area

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

lehtiniemi commented Jul 2, 2018 • edited

clydin commented Jul 3, 2018 • edited

lehtiniemi commented Jul 3, 2018 • edited

clydin commented Jul 3, 2018

lehtiniemi commented Jul 3, 2018

lehtiniemi commented Jul 3, 2018

clydin commented Jul 3, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

lehtiniemi commented Jul 2, 2018 •

edited

Bug Report or Feature Request (mark with an `x`)

lehtiniemi commented Jul 2, 2018 •

edited

clydin commented Jul 3, 2018 •

edited

lehtiniemi commented Jul 3, 2018 •

edited