No animation when --prod flag enabled about ngx-sortablejs

[arno-le]

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

[Yqnn]

SortableJS/Sortable#1242

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

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

[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

[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

[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, [email protected] and [email protected]

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 [email protected] and [email protected] like told by @smnbbrv makes it work, but I'm not sure this is the correct fix...