diogoqueiros / ionic-swipe-all

Allow Ionic to recognize both horizontal and vertical swipe gesture.
16 stars 8 forks source link

The Angular AoT build failed #7

Closed egorermolaev closed 5 years ago

egorermolaev commented 6 years ago

When I try to build my project with the "--prod" flag (for iOS and Android) there's a following error.

Running app-scripts build: --prod --platform android --target cordova [10:32:32] build prod started ... [10:32:32] clean started ... [10:32:32] clean finished in 2 ms [10:32:32] copy started ... [10:32:32] deeplinks started ... [10:32:32] deeplinks finished in 182 ms [10:32:32] ngc started ... [10:32:37] typescript error Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:31 in the original .ts file), resolving symbol NgModule in /Users/usi/WebstormProjects/justshareit/node_modules/ionic-swipe-all/node_modules/@angular/core/core.d.ts, resolving symbol IonicSwipeAllModule in /Users/usi/WebstormProjects/justshareit/node_modules/ionic-swipe-all/dist/module.d.ts, resolving symbol IonicSwipeAllModule in /Users/usi/WebstormProjects/justshareit/node_modules/ionic-swipe-all/dist/module.d.ts

Error: The Angular AoT build failed. See the issues above at /Users/usi/WebstormProjects/justshareit/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55 at step (/Users/usi/WebstormProjects/justshareit/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23) at Object.next (/Users/usi/WebstormProjects/justshareit/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53) at fulfilled (/Users/usi/WebstormProjects/justshareit/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58) at [10:32:37] copy finished in 5.45 s

mipatel2811 commented 6 years ago

Do you find any solution for this issue, because i am facing the same error and i need the solution,

Thanks in advance

mayankprayas commented 6 years ago

Hi @diogoqueiros , I am also facing the same issue, please help us to fix this issue, this is happing when we are building app for prod flag.

image

egorermolaev commented 6 years ago

Sup man,

No idea how to solve it. My solution was not to use all-swipe plugin…

Regards, Egor

On 22 May 2018, at 08:16, mayankprayas notifications@github.com<mailto:notifications@github.com> wrote:

Hi @diogoqueiroshttps://github.com/diogoqueiros , I am also facing the same issue, please help us to fix this issue, this is happing when we are building app for prod flag.

[image]https://user-images.githubusercontent.com/25479353/40345167-bb330514-5db5-11e8-945a-0e8026674fc7.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/diogoqueiros/ionic-swipe-all/issues/7#issuecomment-390875350, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Aj6vpDGuzLYICxiGObZ2ZQCM3MTv36Udks5t061TgaJpZM4S8gus.

timmyomahony commented 6 years ago

When installing the package via npm, you'll see that in your node_modules/ionic-swipe-all/module.js that there is the following:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicSwipeAll } from './ionic.swipe.all';
var IonicSwipeAllModule = (function () {
    function IonicSwipeAllModule() {
    }
    IonicSwipeAllModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [IonicSwipeAll],
                    exports: [IonicSwipeAll],
                    imports: [CommonModule],
                },] },
    ];
    /** @nocollapse */
    IonicSwipeAllModule.ctorParameters = function () { return []; };
    return IonicSwipeAllModule;
}());
export { IonicSwipeAllModule };
//# sourceMappingURL=module.js.map

which I assume is the cause of the issue.

To fix this, I simply created my own directive to mimc the functionality

npm install hammerjs --save && npm install @types/hammerjs --save-dev
# I'm using Ionic
ionic generate directive swipe-all
import { Directive, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';

import { HammerGestureConfig } from '@angular/platform-browser';

import * as Hammer from 'hammerjs';

@Directive({
  selector: '[swipe-all]' // Attribute selector
})
export class SwipeAllDirective extends HammerGestureConfig implements OnInit {

  @Output() swipe = new EventEmitter<any>();
  @Output() swipeup = new EventEmitter<any>();
  @Output() swipedown = new EventEmitter<any>();

  private hammer: any = Hammer;

  constructor(private elem: ElementRef) {
    super();
  }

  ngOnInit(): void {
    const instance = new Hammer(this.elem.nativeElement);
    instance.get('swipe').set({ direction: this.hammer.DIRECTION_ALL });

    instance.on('swipe', event => this.swipe.emit(event));
    instance.on('swipeup', event => this.swipeup.emit(event));
    instance.on('swipedown', event => this.swipedown.emit(event));
  }
}

Then include it in your app modules and use it <div swipe-all (swipedown)="...">...

I think the npm version needs to be repackaged

diegokiaranet commented 6 years ago

@timmyomahony I followed your steps and created a new directive, but the event is fired twice every time I swipe my finger on the screen. Do you know what could be causing that behaviour?

Edit: Strangely, removing completely the directive and just leaving the methods works. I would say that Hammerjs is somehow already implemented in Ionic

diogoqueiros commented 5 years ago

Hi guys, sorry for the delay, I'm been really busy.

@egorermolaev @mipatel2811 @mayankprayas I made a few changes in settings to work with prod builds. Can you please test again with new 1.3.0 version?

@diegokiaranet In fact the swipe event fired twice for the (swipeup) and (swipedown), I've already fix this, feel free to test new version.

Thank you all.