1.6.1+ build optimizer breaking bootstrap carousel transition effects

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

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

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```

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?

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

@rajravat

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

@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 :(

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>

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.

@Ranboz

Thanks @Ranboz ,

This fixed for me :)

fix(@angular-devkit/build-angular): remove pure_getters

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

fix(@angular-devkit/build-angular): remove pure_getters

Navigation Menu

Repository navigation

1.6.1+ build optimizer breaking bootstrap carousel transition effects #9231

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

new index.html

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

1.6.1+ build optimizer breaking bootstrap carousel transition effects #9231

Description

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

Activity

clydin commented on Jan 16, 2018

rajravat commented on Jan 17, 2018

clydin commented on Jan 17, 2018

rajravat commented on Jan 18, 2018

dinerotah commented on Jan 18, 2018

rajravat commented on Jan 18, 2018

clydin commented on Feb 6, 2018

Ranboz commented on Feb 9, 2018

new index.html

itsSandeepNandey commented on Jul 14, 2018

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions