1.6.1+ build optimizer breaking bootstrap carousel transition effects

[rajravat]

Versions

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.4
Node: 8.1.4
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.5.3
webpack: 3.10.0

Repro steps

• Step 1 - Download project from https://github.com/rajravat/angular-bug
• Step 2 - Run ng serve --prod

Observed behavior

carousel transitions are not behaving correctly.

Desired behavior

The transitions for the bootstrap carousel are very janky, i believe this is caused by the build optimizer and has been happening since cli 1.6.1+ (works fine with 1.6.0 and below), if you run ng server --prod --build-optimizer=false then the carousel transitions display correctly.

Is this a bug in the build optimizer? i'm currently working around this issue by downgrading to cli 1.6.0

Mention any other details that might be useful (optional)

The bootstrap version is 3.1.0

[clydin]

can you provide the ng version output for the downgraded working setup?

[rajravat]

this is after downgrading to angular 1.6.0 where i dont need to disable the build optimizer

Node: 8.1.4
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.5.3
webpack: 3.10.0```

[clydin]

It appears the same version of the build optimizer (0.0.38) is being used in both cases. Something else must be affecting the output between version 1.6.0 and 1.6.1. We'll need to perform some additional investigation to narrow down the cause. Can you provide the versions of uglify-es that are being used?

[rajravat]

sorry are you able to tell me where i can find this information? i'm currently using the angular cli to create a new project and can't find any references to this in the package.json

[dinerotah]

@rajravat run on project root: npm ls uglify-es

[rajravat]

@Taha-Di-Nero thanks!

uglify version when using cli 1.6.0:
-- @angular/cli@1.6.0 -- uglifyjs-webpack-plugin@1.1.6 -- uglify-es@3.3.7

uglify version when using cli 1.6.4:
-- @angular/cli@1.6.4 -- uglifyjs-webpack-plugin@1.1.6 -- uglify-es@3.3.7

looks like they are using the same version :(

[clydin]

This is actually due to the uglify-es setting pure_getters which is enabled when the build optimizer is enabled. The version of bootstrap being used (3.1.0) either contains code which uses property get functions with side effects or there's the potential that there could be a defect in uglify-es itself (same behavior was observed in 3.3.9, unfortunately). The pure_getters option is not something that can be removed as it is responsible for a large amount of the overall size reduction of the final output.

You could try a newer version of bootstrap (latest for 3.x is 3.3.7). However, for including bootstrap (and since jQuery is already include this way in the sample project), using the bootstrap CDN will allow the application to work as intended and increase the likelihood of a visual performance increase for end users. (Due to a greatly increased likelihood of the file being cached.)

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

[Ranboz]

Another FIX (load css & js from /assets/ folder)

• Move bootstrap and JQuery files to /assets/..
• Add references in index.html
• Remove references from .angular-cli.json

new index.html

<head>
..
	<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
..
</head>
<body>
..
	<script src="./assets/js/jquery.min.js"></script>
	<script src="./assets/js/bootstrap.min.js"></script>
..
</body>

Have a great day.

[itsSandeepNandey]

Thanks @Ranboz ,

This fixed for me :)