search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

NG_BUILD_IVY_LEGACY missing in Angular 12 #21152

Closed KrakenTyio closed 3 years ago

KrakenTyio commented 3 years ago

After upgrade to latest angular 12.1, and few minutes i figure out NG_BUILD_IVY_LEGACY is not working anymore.

(almost all extra configs from custom-webpack i adapt to work)

Last angular 11.x i run like NG_BUILD_IVY_LEGACY=1 ng serve in docker container (node 15) and takes in our project 1 build: ~105s and rebuild ~4-5s

now no matter if i have NG_BUILD_IVY_LEGACY or not it takes 1 build: ~240s and rebuild ~85s

Its not much cool

Same result is also without custom-webpack with regular schema for angular.json

npm ls

├── @agm/core@3.0.0-beta.0
├── @angular-builders/custom-webpack@12.1.0
├── @angular-devkit/build-angular@12.0.4
├── @angular-eslint/builder@12.1.0
├── @angular-eslint/eslint-plugin-template@12.1.0
├── @angular-eslint/eslint-plugin@12.1.0
├── @angular-eslint/schematics@12.1.0
├── @angular-eslint/template-parser@12.1.0
├── @angular/animations@12.0.5
├── @angular/cdk@12.0.5
├── @angular/cli@12.0.4
├── @angular/common@12.0.5
├── @angular/compiler-cli@12.0.5
├── @angular/compiler@12.0.5
├── @angular/core@12.0.5
├── @angular/forms@12.0.5
├── @angular/language-service@12.0.5
├── @angular/localize@12.0.5
├── @angular/platform-browser-dynamic@12.0.5
├── @angular/platform-browser@12.0.5
├── @angular/router@12.0.5
├── @ckeditor/ckeditor5-angular@2.0.1
├── @ckeditor/ckeditor5-build-classic@19.0.0 (git+ssh://git@github.com/bart-sk/ckeditor5-build-classic.git#350b6fc971f59ae8bc44179dd0791c7beda5b3e7)
├── @ngrx/effects@12.1.0
├── @ngrx/store-devtools@12.1.0
├── @ngrx/store@12.1.0
├── @ngtools/webpack@12.0.4
├── @sentry/angular@6.7.1
├── @sentry/cli@1.66.0
├── @sentry/tracing@6.7.1
├── @stripe/stripe-js@1.15.0
├── @syncfusion/ej2-angular-documenteditor@19.1.69
├── @testing-library/angular@10.8.2
├── @testing-library/user-event@13.1.9
├── @types/core-js@2.5.4
├── @types/create-hmac@1.1.0
├── @types/croppie@2.6.0
├── @types/dwt@16.1.1
├── @types/file-saver@2.0.2
├── @types/googlemaps@3.43.3
├── @types/jasmine@3.7.7
├── @types/jasminewd2@2.0.9
├── @types/karma@6.3.0
├── @types/lodash-es@4.17.4
├── @types/md5@2.3.0
├── @types/mocha@8.2.2
├── @types/modernizr@3.5.3
├── @types/node@15.12.2
├── @types/pdfmake@0.1.17
├── @types/sortablejs@1.10.6
├── @types/svg-sprite-loader@3.9.3
├── @types/webpack-dev-server@3.11.4
├── @types/webpack-env@1.16.0
├── @types/youtube@0.0.42
├── @typescript-eslint/eslint-plugin@4.27.0
├── @typescript-eslint/parser@4.27.0
├── angular-email-editor@0.7.1
├── chalk@4.1.1
├── codelyzer@6.0.2
├── core-js@3.14.0
├── create-hmac@1.1.7
├── croppie@2.6.5
├── cross-env@7.0.3
├── dom-autoscroller@2.3.4
├── dwt@17.1.1
├── eslint-config-prettier@8.3.0
├── eslint-plugin-ngrx@1.26.0
├── eslint-plugin-prettier@3.4.0
├── eslint-plugin-rxjs-angular@1.0.6
├── eslint-plugin-rxjs@3.3.3
├── eslint@7.28.0
├── file-saver@2.0.5
├── husky@6.0.0
├── is-docker@2.2.1
├── jasmine-core@3.7.1
├── jasmine-reporters@2.4.0
├── jasmine-spec-reporter@7.0.0
├── jasmine@3.7.0
├── junit@1.4.9
├── karma-chrome-launcher@3.1.0
├── karma-coverage@2.0.3
├── karma-jasmine-html-reporter@1.6.0
├── karma-jasmine@4.0.1
├── karma-junit-reporter@2.0.1
├── karma-mocha-reporter@2.2.5
├── karma-parallel@0.3.1
├── karma-selenium-webdriver-launcher@0.0.4
├── karma@6.3.4
├── lint-staged@11.0.0
├── lodash-es@4.17.21
├── luxon@1.27.0
├── md5@2.3.0
├── mobile-detect@1.4.5
├── moment-locales-webpack-plugin@1.2.0
├── moment-timezone-data-webpack-plugin@1.5.0
├── moment-timezone@0.5.33
├── moment@2.29.1
├── ngx-clipboard@14.0.1
├── ngx-i18nsupport@0.17.1
├── ngx-stripe@12.0.2
├── node-interval-tree@1.3.3
├── normalize.css@8.0.1
├── pdfmake@0.1.71
├── perfect-scrollbar@1.5.1
├── prettier@2.3.1
├── protractor-beautiful-reporter@1.3.6
├── protractor-fail-fast@3.1.0
├── protractor@7.0.0
├── resize-observer-polyfill@1.5.1
├── rrule@2.6.8
├── rxjs@6.6.7
├── sass@1.35.1
├── socket.io-client@4.1.2
├── sortablejs@1.13.0
├── source-map-support@0.5.19
├── stylelint-config-prettier@8.0.2
├── stylelint-config-standard@22.0.0
├── stylelint@13.13.1
├── svg-sprite-loader@6.0.7
├── svg-transform-loader@2.0.13
├── svgo-loader@3.0.0
├── svgo@2.3.0
├── trust1connector@3.0.0
├── tslib@2.3.0
├── typescript@4.2.4
├── url-loader@4.1.1
├── xliffsplit@1.1.0 (git+ssh://git@github.com/KrakenTyio/xlifsplit.git#3a07814a3262cb7f6a99da629986b6fe837f7212)
├── xlsx@0.17.0
└── zone.js@0.11.4
petebacondarwin commented 3 years ago

Transferring to the CLI project.

JoostK commented 3 years ago

The legacy build pipeline doesn't exist anymore in v12.

As for your perf problems, they might be related to the adoption of incremental type-checking using TypeScript's incremental APIs, but it's only guessing at this time. Can you share the project (privately, if needed) or provide CPU profiles so we can get a better understanding of that's going on?

clydin commented 3 years ago

Was ng update used to update and migrate the project? If so, was a custom and/or third-party builder present when the update took place? If possible, please provide the the base and configuration options used when performing the build/serve from within angular.json.

The automatic migrations performed during the update process account for breaking changes when updating to a new major version. Unfortunately, custom and third-party builders cannot be automatically migrated via the official builder migrations as the behavior, available options, and default option values are not known or managed by the Angular team. Ideally such builders should provide their own migrations and some of these builders may not yet be fully compatible with Angular v12. This is of particular relevance for the symptoms shown above as several of the official builder options pertaining to production builds were altered. The automatic update migrations will adjust the options to retain prior behavior for the official builders. However, if the migrations were not applied or custom/third-party builders were present, existing projects may be performing production-like builds when development behavior is expected (e.g., ng serve). This would include abnormally long development build/re-build times.

Regarding the Node.js version, v15 is not considered a production-ready version of Node.js and is not recommended for use with the Angular CLI. Node.js v14 is the recommended version for use with the Angular CLI at this time. This, however, is probably not the cause of the performance concerns.

KrakenTyio commented 3 years ago

Upgrade did by regular steps from https://update.angular.io/?l=3&v=11.0-12.0 Angular.json ill provide but cpu profile will be generate later

For faster generating, can you provide syntax and steps for generating cpu profile for build process?

alan-agius4 commented 3 years ago

Hi @KrakenTyio,

Since you use custom builders, you need to apply the breaking changes in angular.json manually, unless the builder you use provide it own migration. See https://github.com/angular/angular-cli/releases/tag/v12.0.0 for more information about the breaking changes.

Since you are using Node.js 14 you can use the --cpu-proof argument to generate a CPU profile.

node --cpu-proof node_modules/@angular/cli/lib/init.js serve
KrakenTyio commented 3 years ago

Hi there cpu profile and trace resolution its contain first build and also adding one change in app.ts (one if condition with console.log(1)) and revert this change also its generated by node 14 lts docker docker has allowed 12GB ram, its consule almost full 12gb in first rebuild, after build it stay in 6gb, when run rebuil it takes avr 6-8gb ram timing was some in 250-260s and rebuild 35-45s, just note it, in LEGACY build ang 11 it takes max 110s and 4-6s

npm: 7.18.1 node: v14.17.1

installed by: npm i --no-optional --legacy-peer-deps

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false,
    "packageManager": "npm"
  },
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "cp",
      "i18n": {
        "sourceLocale": "en-GB",
        "locales": {
          "nl-BE": "src/locale/messages.nl-BE.xlf",
          "nl-NL": "src/locale/messages.nl-NL.xlf",
          "fr-BE": "src/locale/messages.fr-BE.xlf",
          "de-DE": "src/locale/messages.de-DE.xlf"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "build/sandbox",
            "index": "src/index.html",
            "main": "src/app.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": false
            },
            "assets": [
              {
                "glob": "favicon-32x32.png",
                "input": "nui/assets/favicons/",
                "output": "/favicons/"
              },
              {
                "glob": "*",
                "input": "assets",
                "output": "/public/images/"
              },
              {
                "glob": "*",
                "input": "config/init/",
                "output": "/config/init/"
              }
            ],
            "styles": ["src/style.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["nui", "node_modules/@syncfusion"]
            },
            "scripts": [],
            "allowedCommonJsDependencies": [
              "md5",
              "croppie",
              "xlsx",
              "file-saver",
              "node-interval-tree",
              "socket.io-client",
              "moment-timezone",
              "dom-set",
              "dom-plane",
              "dom-autoscroller",
              "zone.js/dist/long-stack-trace-zone",
              "querystring"
            ]
          },
          "configurations": {
            "production": {
              "assets": [
                {
                  "glob": "robots.txt",
                  "input": "nui/assets/",
                  "output": "/"
                },
                {
                  "glob": "humans.txt",
                  "input": "nui/assets/",
                  "output": "/"
                },
                {
                  "glob": "**/*",
                  "input": "nui/assets/favicons/",
                  "output": "/favicons/"
                },
                {
                  "glob": "*",
                  "input": "assets",
                  "output": "/public/images/"
                },
                {
                  "glob": "*",
                  "input": "config/init/",
                  "output": "/config/init/"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "localize": true,
              "statsJson": false,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": false,
                "hidden": true
              },
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "main",
                  "maximumWarning": "700kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "initial",
                  "maximumWarning": "1500kb",
                  "maximumError": "3mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "50kb"
                },
                {
                  "type": "anyScript",
                  "maximumWarning": "1mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "be": {
              "localize": ["nl-BE"]
            },
            "nl": {
              "localize": ["nl-NL"]
            },
            "fr": {
              "localize": ["fr-BE"]
            },
            "de": {
              "localize": ["de-DE"]
            },
            "prod-stats": {
              "browserTarget": "sandbox:build:production",
              "statsJson": true,
              "namedChunks": true,
              "extractLicenses": false,
              "outputHashing": "none"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "sandbox:build",
            "port": 8080
          },
          "configurations": {
            "production": {
              "browserTarget": "sandbox:build:production"
            },
            "be": {
              "browserTarget": "sandbox:build:be"
            },
            "nl": {
              "browserTarget": "sandbox:build:nl"
            },
            "fr": {
              "browserTarget": "sandbox:build:fr"
            },
            "de": {
              "browserTarget": "sandbox:build:de"
            },
            "jit": {
              "aot": false,
              "sourceMap": {
                "scripts": true,
                "styles": false,
                "vendor": false
              }
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "sandbox:build",
            "format": "xlf2",
            "outputPath": "src/locale",
            "outFile": "messages.xlf"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "codeCoverage": true,
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "vendor": false
            },
            "styles": [],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "sandbox:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "sandbox:serve:production"
            },
            "noserve": {
              "devServerTarget": ""
            },
            "sandbox": {
              "devServerTarget": "",
              "baseUrl": "https://app.mvp-dev.aws.crossuite.com"
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  }
}
alan-agius4 commented 3 years ago

As suspected the angular.json was not updated to reflect the new defaults of Angular CLI, which is causing development builds to be fully optimised and slow rebuild times.

Please make sure that you are on the latest version of @angular/cli and run the below.

ng update @angular/cli —-migrate-only update-angular-config-v12
KrakenTyio commented 3 years ago

@alan-agius4 you right, now its better 1 build 98s rebuild 14s->5s->4.5s->5s

probably when i did migrate it was there builders with custom-webpack and not move properties right now with angular-devkit builders it do pretty much stuffs

after upgrade angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false,
    "packageManager": "npm"
  },
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "cp",
      "i18n": {
        "sourceLocale": "en-GB",
        "locales": {
          "nl-BE": "src/locale/messages.nl-BE.xlf",
          "nl-NL": "src/locale/messages.nl-NL.xlf",
          "fr-BE": "src/locale/messages.fr-BE.xlf",
          "de-DE": "src/locale/messages.de-DE.xlf"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "build/sandbox",
            "index": "src/index.html",
            "main": "src/app.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": false
            },
            "assets": [
              {
                "glob": "favicon-32x32.png",
                "input": "nui/assets/favicons/",
                "output": "/favicons/"
              },
              {
                "glob": "*",
                "input": "assets",
                "output": "/public/images/"
              },
              {
                "glob": "*",
                "input": "config/init/",
                "output": "/config/init/"
              }
            ],
            "styles": ["src/style.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["nui", "node_modules/@syncfusion"]
            },
            "scripts": [],
            "allowedCommonJsDependencies": [
              "md5",
              "croppie",
              "xlsx",
              "file-saver",
              "node-interval-tree",
              "socket.io-client",
              "moment-timezone",
              "dom-set",
              "dom-plane",
              "dom-autoscroller",
              "zone.js/dist/long-stack-trace-zone",
              "querystring"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "assets": [
                {
                  "glob": "robots.txt",
                  "input": "nui/assets/",
                  "output": "/"
                },
                {
                  "glob": "humans.txt",
                  "input": "nui/assets/",
                  "output": "/"
                },
                {
                  "glob": "**/*",
                  "input": "nui/assets/favicons/",
                  "output": "/favicons/"
                },
                {
                  "glob": "*",
                  "input": "assets",
                  "output": "/public/images/"
                },
                {
                  "glob": "*",
                  "input": "config/init/",
                  "output": "/config/init/"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "localize": true,
              "statsJson": false,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": false,
                "hidden": true
              },
              "namedChunks": false,
              "extractLicenses": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "main",
                  "maximumWarning": "700kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "initial",
                  "maximumWarning": "1500kb",
                  "maximumError": "3mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "50kb"
                },
                {
                  "type": "anyScript",
                  "maximumWarning": "1mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "be": {
              "localize": ["nl-BE"]
            },
            "nl": {
              "localize": ["nl-NL"]
            },
            "fr": {
              "localize": ["fr-BE"]
            },
            "de": {
              "localize": ["de-DE"]
            },
            "prod-stats": {
              "browserTarget": "sandbox:build:production",
              "statsJson": true,
              "outputHashing": "none"
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "sandbox:build",
            "port": 8080
          },
          "configurations": {
            "production": {
              "browserTarget": "sandbox:build:production"
            },
            "be": {
              "browserTarget": "sandbox:build:be"
            },
            "nl": {
              "browserTarget": "sandbox:build:nl"
            },
            "fr": {
              "browserTarget": "sandbox:build:fr"
            },
            "de": {
              "browserTarget": "sandbox:build:de"
            },
            "jit": {
              "aot": false,
              "sourceMap": {
                "scripts": true,
                "styles": false,
                "vendor": false
              }
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "sandbox:build",
            "format": "xlf2",
            "outputPath": "src/locale",
            "outFile": "messages.xlf"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "codeCoverage": true,
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "vendor": false
            },
            "styles": [],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "sandbox:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "sandbox:serve:production"
            },
            "noserve": {
              "devServerTarget": ""
            },
            "sandbox": {
              "devServerTarget": "",
              "baseUrl": "https://app.mvp-dev.aws.crossuite.com"
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  }
}
alan-agius4 commented 3 years ago

@KrakenTyio, so issue resolved correct?

KrakenTyio commented 3 years ago

Yes, we are on same time like before with legacy

angular-automatic-lock-bot[bot] commented 3 years ago

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.