No animation when --prod flag enabled

[Yqnn]

Hello,

It seems animations are broken when the production mode of angular is enabled.

It's easy to reproduce on a fresh angular project :

ng new my-app
npm install --save sortablejs && npm install --save angular-sortablejs

In app.component.html :

<div [sortablejs]="items" [sortablejsOptions]="{ animation: 150 }">
  <div *ngFor="let item of items" style="background-color:red; margin:10px; padding:10px">{{ item }}</div>
</div>

In app.module.ts :

  imports: [
    BrowserModule,
    SortablejsModule
  ],

In app.component.ts : items = ["A","B"];

Now if you run the project with ng serve , animations work well, but if you start it with ng serve --prod, they don't. There is the same behavior with ng build and ng build --prod.

I'm using Angular 5.0.5, with CLI 1.5.4, angular-sortable 2.3.0 .

Thanks in advance for your help.

[smnbbrv]

Hi, just validated it on my projects and must admit the issue is present. For me the global animations do not work either.

Is this a 2.3.0 bug? Did ~2.2.0 have this problem?

[Yqnn]

Apparently it was there before, I had the same issue with 2.2.2 .

[Yqnn]

I found out what's wrong. Actually it's a bug here : https://github.com/RubaXa/Sortable/blob/master/Sortable.js

The line 891 is removed by the code optimizer. I'm preparing a pull requet.

[Yqnn]

https://github.com/RubaXa/Sortable/pull/1242

[smnbbrv]

Wow, you are a superman!

[marlon360]

Still not working. https://github.com/RubaXa/Sortable/pull/1242#issuecomment-359206927

[smnbbrv]

Although the pull request got merged, the original library hasn't been updated yet (see package.json last update). When something bigger than 1.7.0 comes it should be fixed

[arno-le]

@marlon360 Workaround for now: call ng build --prod --build-optimizer=false.

[roeir]

@smnbbrv build-optimizer will remove the dummy var, as variable that never read, so assignment a value will never lead to anything. Way that @Yqnn suggested, about target.getBoundingClientRect(), in my opinion, is more appropriate

[Yqnn]

@roeir Indeed you're right. I'm pretty sure it was working in Angular 5, but I just did the test with Angular 6 and it doesn't work anymore.

Another solution would be to attach the value to this : this.forRepaintDummy = target.offsetWidth; Like that it's working fine.

[Tre665]

Hi guys, we also run into this problems. Is there something that we could do as a consumer to workaround this bug?

[marlon360]

The workaround by @ygerg works:

Workaround for now: call ng build --prod --build-optimizer=false.

[Tre665]

@marlon360 Thanks for the tipp! I hoped that in the meantime there would be a way that have the build optimizer still activated. But I guess you can't have everything :-) I have to check how much the prod size increases. Thanks again!

[smnbbrv]

Hi guys,

just checked the animation in angular@7 and it seems that the new uglifier they use (Terser) is not breaking animation anymore.

Could you confirm?

[marlon360]

@smnbbrv I updated to Angular 7.0.1 and no luck. If I build without the flag --build-optimizer=false, the animations won't work.

[cthrax]

@smnbbrv We're on the following version and still experiencing this issue: angular: 7.2.6 angular-cli: 7.3.2 angular-sortablejs: 2.7.0 sortablejs: 1.8.3

[smnbbrv]

Animation works as expected.

Just tried with latest angular@8, ngx-sortablejs@3.1.1 and sortablejs@1.9.0

When you still experience the issue please open a new issue with detail description and a way to reproduce it.

[Jeroen96]

Hi animations aren't working for me when running with the --prod flag.

Angular cli: 8.3.20 Angular: 8.2.0 Ngx-sortablejs: 3.1.3 Sortablejs: 1.10.1

[smnbbrv]

@Jeroen96 could you provide a minimal example?

[Jeroen96]

I can create a blanco project and see if the issue is there, but the main parts look like the following:

Edit: I've created a new project with the angular cli. Same issues here when running ng serve --prod, no animations. Downgrading to sortablejs 1.9.0 where u stated it worked, doesnt work also.

Angular: 8.2.14 Angular-cli: 8.3.20 Ngx-sortablejs: 3.1.3 sortablejs: 1.10.1

App.module

@NgModule({
  declarations: [
    AppComponent,
    TopbarComponent,
    NavComponent,
    NavItemComponent
  ],
  exports: [
    InlineSVGModule,
    TranslateModule
  ],
  imports: [
    // angular
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ApiModule.forRoot({ rootUrl: '/api' }),
    SortablejsModule.forRoot({ animation: 150 }),

    // 3rd party
    KeycloakAngularModule,
    InlineSVGModule.forRoot(),

    // core, shared & data
    SharedModule,
    CoreModule,
    DataModule,

    // app
    AppRoutingModule

  ],

component html

<div class="form-group">
          <label for="inputSeed" translate>labels.confirm_your_secret_key</label>
          <div class="drop-zone" id="drop-zone" [sortablejs]="dropZoneData" [sortablejsOptions]="dropZoneOptions">
            <div class="drag-box" *ngFor="let item of dropZoneData">{{item}}</div>
          </div>
        </div>

        <div class="box-storage" [sortablejs]="shuffledListData" [sortablejsOptions]="{group: 'seed', sort: false}">
          <div class="drag-box" *ngFor="let item of shuffledListData">{{item}}</div>
        </div>

component.ts

 this.dropZoneOptions = {
      onSort: (event: any) => {
        this.validateMnemonic();
      },
      group: 'seed'
    };

Running angular via: ng serve --prod --host 0.0.0.0 --disable-host-check

[daaa57150]

Why is this issue closed ? I have the same problem: no animation when using production config. My versions:

Angular: 9.1.11  
Angular CLI: 9.1.10  
ngx-sortablejs: 3.1.4  
sortablejs: 1.10.2  

Forcing the old versions ngx-sortablejs@3.1.1 and sortablejs@1.9.0 like told by @smnbbrv makes it work, but I'm not sure this is the correct fix...