Angular Cli 1.5 - vendor bundle is missing for aot prod build ( ng build -prod -aot )

[manandkumaar]

Upgraded my project from Angular 4 to Angular 5

vendor bundle is missing while take prod aot build.

Versions.

Angular CLI: 1.5.0
Node: 6.11.2
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

angular/cdk: 5.0.0-rc0
angular/cli: 1.5.0
angular/material: 5.0.0-rc0
angular-devkit/build-optimizer: 0.0.32
angular-devkit/core: 0.0.20
angular-devkit/schematics: 0.0.35
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.8.0
schematics/angular: 0.1.1
typescript-require-latest-typescript: 0.2.9-1
typescript: 2.4.2
webpack: 3.8.1

commands tried :-

ng build --prod --aot --env=prod
ng build -prod -aot -e=prod

Angular 5 dist/ (prod aot)

Angular 4 dist/ (prod aot) .

.angular-cli.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "Test"
},
"apps": [
{
"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",
"styles": [
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"dev-b": "environments/environment.dev.ts",
"qa": "environments/environment.qa.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "/node_modules/"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "/node_modules/"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "/node_modules/"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"serve": {
"port": 4400,
"host": "localhost.cat.com"
},
"styleExt": "scss",
"component": {}
}
}

help wanted

[manandkumaar]

Vendor bundle is getting for the following command.
ng build -prod -aot -vc=true

It looks like default value got changed to false in latest version (1.5).

[fedorl]

This change makes little sense. It trades really minor size optimization for download time, especially on app updates.

[gbrancolini]

@fedorl, actually when you do not include vendor bundle, it seems to be that all that code is include into main file. You can try compilation with vc=true and vc=false to watch the difference. But Im agree that is easer.

[fedorl]

I know the difference,

What I mean is that without splitting into bundles, you make first-time application load faster due to better optimization (and so far gains were not so impressive for large application). But on the other hand, you make updates significantly slower since a larger chunk of the code needs to be re-downloaded (all the code, in this case).

By splitting into chunks, you increase the first-time load usually only slightly, but decrease upgrade time significantly, since only the changed code needs to be transferred after first load. Most of the time vendors chunk does not change, so you only update the app code.

Angular is aimed mainly at large complex applications (otherwise, why to bother with all this complexity, I don't catch people who build simple site pages with angular). Large applications usually spend most of their lifetime on updates, not first-time installs.

The first-time business user can afford to wait for initial application loading (especially, given that the difference vc / no vc is not so great so far). But such user is much less tolerant of the automatic version upgrade time.

Optimizing all into main without chunks is like compiling an exe code with static vs. dynamic libraries. For a web application, it is not a good default.

These recent diminishing returns optimizations, in fact, produce poor user experience, in addition, they make the build terrible slow, eat all memory and CPU on build servers and are not a good plan to develop and support a long-lived application in general.

[gbrancolini]

You mention lot of things... In my case, I work in a web site that has between 800/1000 visits per minute, we have several ways to improve our performance (caching servers, and levels inside our application and a simple way to avoid caching angular app in case we re-deploy a new version). What you mention, I will ask to make stress tests just to watch out which has more performance and I will try to answer to you with TPS metrics. But sounds pretty logical your point of view.
The main issue we use to have, is regarding mobile browsers and our poor mobile internet speed. What we use to do to speed a little is to extract the css, instead of delivering as included in our angular app, because browsers uses to cache them, and we notice a great performance impact. Another catch, was to use aot flag.
Regarding CPU usage... well, depends on wich servers you use to build them, but I believe that if it is only once to deploye, is not a big issue... we use to deliver using Jenkins and we force to remove all angular, typescript and cli libraries, download them and reinstall them and then build the angular application... that takes no more than 1 minute.
Regarding the angular per page... well, in general Im agree with you, but with more than 20 yrs of experience, I can tell you that sometimes business force you to make out of the box solutions, and is cool... otherwise believe me, frameworks such as reactjs, angular, tensorflow, android, etc wont exist and wont pay my bills!!
Thank you a lot for your feedback, I will try to come back with this stress testing result in no more than a week from now.
Gabriel

[sgashler]

When I run ng build -prod -aot -vc=true, I get the error:

Configuration 'true' could not be found in project 'my-project'.

Anyone know what I'm missing? I recently upgraded to Angular 6.

[manandkumaar]

@sgashler the above command will not work for angular 6 project.

Command got changed slightly due to new feature addition (workspace - project and library) in angular 6.

Try this command : ng build 'my-project' --prod --vendor-chunk=true

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