Ionic-app-scripts: TypeError: o is not a function using NGO

Created on 2 Oct 2017 · 17Comments · Source: ionic-team/ionic-app-scripts

Short description of the problem:

In our project we are using this angular datatable https://github.com/swimlane/ngx-datatable in version before 10.1.0, because this is using typescript 2.4.x which does not work with latest ionic.
So if we use version 10.0.5 or 9.3.1 with your latest app-scripts running a production build for android
ionic cordova run android --prod
we get this error on importing

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
imports: [
        IonicModule,
        NgxDatatableModule,

on an module

ERROR Error: Uncaught (in promise): TypeError: o is not a function
TypeError: o is not a function
    at 4.js:1
    at Object../node_modules/rxjs/util/UnsubscriptionError.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Subscription.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Subscriber.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/util/toSubscriber.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Observable.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/add/observable/fromEvent.js (4.js:1)
    at t (4.js:1)
    at Object../src/datatable.module.ts (4.js:1)
    at t (4.js:1)
    at Object../src/index.ts (4.js:1)
    at t (4.js:1)
    at 4.js:1
    at 4.js:1
    at n (4.js:1)
    at Object.865 (4.js:1)
    at e (vendor.js:1)
    at Object.562 (4.js:1)
    at e (vendor.js:1)
    at main.js:1
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:1)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:1)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>
    at 4.js:1
    at Object../node_modules/rxjs/util/UnsubscriptionError.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Subscription.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Subscriber.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/util/toSubscriber.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/Observable.js (4.js:1)
    at t (4.js:1)
    at Object../node_modules/rxjs/add/observable/fromEvent.js (4.js:1)
    at t (4.js:1)
    at Object../src/datatable.module.ts (4.js:1)
    at t (4.js:1)
    at Object../src/index.ts (4.js:1)
    at t (4.js:1)
    at 4.js:1
    at 4.js:1
    at n (4.js:1)
    at Object.865 (4.js:1)
    at e (vendor.js:1)
    at Object.562 (4.js:1)
    at e (vendor.js:1)
    at main.js:1
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:1)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:1)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at e._fireError (vendor.js:1)
    at e._failed (vendor.js:1)
    at vendor.js:1
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:1)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:1)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

If we do your workaround from changelog doing only
ionic cordova run android --aot --minifyJs --minifyCss
instead of --prod anything is fine

Which @ionic/app-scripts version are you using?

ionic info
cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:
    cordova (Cordova CLI) : 7.0.1 

local packages:
    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:
    Android SDK Tools : 26.1.1
    Node              : v6.11.3
    npm               : 5.4.2 
    OS                : Linux 4.10

Misc:
    backend : legacy

Source

mburger81

👍1

Most helpful comment

I have passed the info along to the ng-cli team, which is maintaining ngo, and we'll get more info soon.

Thanks,
Dan

danbucholtz on 10 Oct 2017

👍2 😄1

All 17 comments

Using--aot -minifyJs --minifyCss --release creates a apk which is about 11,3MB
Using--prod --release creates an apk aboug 5,4MB
using --prod --release on app-scripts 2.x.x creates a build about 4,9MB

mburger81 on 2 Oct 2017

With all this commands this bug is not happening, but the bundle at the end does IMO strange file size.
ionic cordova build android => 11,8MB
ionic cordova build android --release => 10MB
ionic cordova build android --aot --release 11,3MB MB
ionic cordova build android --minifyJs --minifyCss --release 10,0 MB

How could it bee than --release and -minifyJs --minifyCss --release has nearly the same file size, and about two times bigger then the --prod
I think there could be an error on passing parameters?

mburger81 on 2 Oct 2017

looking into ionic-cli documentation I saw --minifyJS and --minifyCss are wrong parameters, they have to be all lowercase, I also pass --optimizejs to have a smaller bundle so at the end I'm having this command ionic cordova build android --aot --minifyjs --minifycss --optimizejs --release with an apk size of 5,4MB which is about the --prod size

At the end I also figured out to reproduce this error passing single commands, if I use the both parameters --aot and --optimizejs I'm running into the same error as passing --prod parameter.
If I'm using only --aot with --minifyjs and --minifcss or only --optimizejs with --minififjs and --minifycss anything is working, for better explanation:

ionic cordova build android --aot --minifyjs --minifycss --release => 6,7MB does work (fast)
ionic cordova build android --minifyjs --minifycss --optimizejs --release => 5,3MB does work (a little bit slower)
ionic cordova build android --aot --minifyjs --minifycss --optimizejs --release => 5,4MB does NOT work, same error then --prod (but the fastes one)

mburger81 on 2 Oct 2017

@mburger81,

Can you put together a sample project and instructions on how I can recreate this issue so I can rapidly solve it or get it to the ng team to solve?

Thanks,
Dan

danbucholtz on 2 Oct 2017

Hi @danbucholtz
I created a very simple sample project where you can recreate this issue
https://github.com/mburger81/ionic-datatable

There is nothing magically I created a empty ionic starter app doing
ionic start ionic-datatable
I added this dependency "@swimlane/ngx-datatable": "10.0.5", to package.json and run npm install

in app.module.ts I load NgxDatatableModule

So really nothing special.

Now if you run your app on an android device passing --prod parameter doing this
ionic cordova run android --prod
on monitoring the device with with Chrome Developer Tools you can see this BUG

Uncaught TypeError: Cannot read property 'call' of undefined
    at e (vendor.js:1)
    at Object../src/datatable.module.ts (vendor.js:1)
    at e (vendor.js:1)
    at Object../src/index.ts (vendor.js:1)
    at e (vendor.js:1)
    at vendor.js:1
    at vendor.js:1
    at n (vendor.js:1)
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)

and the app on your device is not working

if you do a build without --prod or passing --aot --minifyjs --minfycss everything is fine
ionic cordova run android
and
ionic cordova run android --aot --minifyjs --minifycss

if you pass --aot and also --optimizejs same time you are running in the same issue as passing only --prod
ionic cordova run android --aot --minifyjs --minifycss --optimizejs

I hope I was clear enaugh

Thx
Michael

mburger81 on 3 Oct 2017

👍1

Where YouTube able to reproduce the error with my sample repository?

mburger81 on 5 Oct 2017

@mburger81,

Yes, I can reproduce the error. I am trying to identify the root cause. I sent the NG team a msg about it and we'll check it out. Thanks.

Thanks,
Dan

danbucholtz on 7 Oct 2017

I have passed the info along to the ng-cli team, which is maintaining ngo, and we'll get more info soon.

Thanks,
Dan

danbucholtz on 10 Oct 2017

👍2 😄1

I've also run into this issue, for what it's worth. Also with a different @swimlane project: Related issue:

https://github.com/swimlane/ngx-charts/issues/583

lincolnthree on 11 Oct 2017

👍1

@mburger81 have you reported this issue to the folks at swimlane? I'm guessing it's not directly their fault, but it's possible they might be able to create a workaround/temporary recommendation.

Have you been able to get --aot and --optimizejs to work together?

lincolnthree on 12 Oct 2017

Hey @danbucholtz - Any chance you could link the ticket with the ng-cli team so that I can follow along? Thanks.

lincolnthree on 27 Oct 2017

Update. I believe this is resolved as of Angular 5 and the new Angular CLI 1.5. However, upgrading to those versions comes with a host of other issues you'll need to resolve in basically every library ever. So proceed at your own risk.

lincolnthree on 14 Nov 2017

Yes same for me. Using ng5 for me makes this issue obsolet but the issue remains for ng4. So from my side feel free to close the project.
But I'll leave the bug open because the bug is still present and pending for ng4

mburger81 on 14 Nov 2017

Same trouble here, I cant do --prod..

yurik94 on 1 Dec 2017

Same for me with v3.1.7, followed @mburger81 's advice above and stopped using --prod in favour of --minifyjs --minifycss --aot as a workaround for the time being.