Ngx-datatable: Angular 5 issue

[nitinht1988]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
After upgrading to angular 5 and also after updating version to ^11.0.0 i am getting below run time error when i try with ng serve -aot, with ng serve it is working fine as expected

webpack-internal:///../../../core/esm5/core.js:1546 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined
TypeError: Cannot read property 'subscribe' of undefined

Expected behavior
It should work without any error

Reproduction of the problem
update angular version to 5 and ngx-datatable version to 11.0.0 and run the angular project with ng serve -aot command.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Windows 7
visual studio code

• Table version: 0.8.x
  11.0.0

• Angular version: 2.0.x
  5.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome latest

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  typescript 2.4.0

[arlowhite]

EDIT: Nevermind, this is not solved by updating TypeScript.

Sounds like a RxJS/TypeScript error.

After upgrading to Angular 5 and angular-cli 1.5, I was not able to build until I updated TypeScript from 2.4 to 2.5

So try TypeScript 2.5.3 (latest) and see if it works.

[arsyed04]

Latest Typescript is 2.6.1

[adriantoczydlowski]

The same issue: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined. TypeError: Cannot read property 'subscribe' of undefined
version: 11.0.0
Angular: 5.0.0
cli: 1.5.0
node: v8.7.0
typescript: 2.5.0

[olaf89]

I have same error

[amcdnl]

What is your rx version?

[adriantoczydlowski]

rxjs: 5.5.2

[arsyed04]

I have opened issue with Angular since it seems more relevant there: https://github.com/angular/angular/issues/20240

[solnat]

I had the same issue.
Importing the typescript sources in my code instead of the dist files fixed it. It seems that the build is to blame here.

[arsyed04]

@solnat Can you elaborate on steps, and more importantly can you create pull request with change so that this fix becomes part of next minor version.

[solnat]

@arsyed04 There was no code changes needed for me. A working fix was to import the .ts module instead of the compiled .js:
import {NgxDatatableModule} from '@swimlane/ngx-datatable/src';
instead of
import {NgxDatatableModule} from '@swimlane/ngx-datatable';

Building in AoT straight from the typescript source instead of importing the dist fixes the issue. I have no idea why though, didn't bother to look into the build process of this library.

[arlowhite]

Confirmed, AOT only issue.

If you're using angular-cli, this can be reproduced in development mode with: ng serve --aot

The exception is raised from this code.
At the line with: instance[output.propName].subscribe(...

function createDirectiveInstance(view, def) {
    // components can see other private services, other directives can't.
    var /** @type {?} */ allowPrivateServices = (def.flags & 32768 /* Component */) > 0;
    // directives are always eager and classes!
    var /** @type {?} */ instance = createClass(view, /** @type {?} */ ((def.parent)), allowPrivateServices, /** @type {?} */ ((def.provider)).value, /** @type {?} */ ((def.provider)).deps);
    if (def.outputs.length) {
        for (var /** @type {?} */ i = 0; i < def.outputs.length; i++) {
            var /** @type {?} */ output = def.outputs[i];
            var /** @type {?} */ subscription = instance[/** @type {?} */ ((output.propName))].subscribe(eventHandlerClosure(view, /** @type {?} */ ((def.parent)).nodeIndex, output.eventName)); /** @type {?} */
            ((view.disposables))[def.outputIndex + i] = subscription.unsubscribe.bind(subscription);
        }
    }
    return instance;
}

For me, it happens with propName='scroll'
instance: DatatableComponent

output: {
  eventName: "scroll"
  propName: "scroll"
  target: null
  type: 1
}

instance['scroll'] === undefined, which is the source of this error.

[arlowhite]

I suspect the issue is here:
src/components/body/scroller.component.ts

  ngOnInit(): void {
    // manual bind so we don't always listen
    if (this.scrollbarV || this.scrollbarH) {
      this.parentElement = this.element.parentElement.parentElement;
      this.onScrollListener = this.renderer.listen(
        this.parentElement, 'scroll', this.onScrolled.bind(this));
    }
  }

I don't know what renderer.listen() does without doing more research.

Does anyone see how this breaks with Angular 5 in AOT mode?
Maybe it's an issue with the ngx-datatable build?

EDIT: @amcdnl This is using Renderer instead of Renderer2, maybe that's the fix?

UPDATE: Tried rebuilding with Renderer2, this didn't fix the issue.

[wizarrc]

@arlowhite renderer.listen() is required to do virtual scrolling. Without it, the entire list would have to be pre-rendered, and that's not scalable.

[amcdnl]

I think they removed the need for doing the renderer hooking like this in ng5. I need to confirm though.

[arlowhite]

@solnat 's trick got me past the subscribe error.
import {NgxDatatableModule} from '@swimlane/ngx-datatable/src';

Also, you need to add /src to every spot you import DatatableComponent in your project. Otherwise things like @ViewChild(DatatableComponent) will break.

EDIT: with angular-cli I had TypeScript errors (implicit any and not all code paths returning a value) when importing from /src.
These are fixed in 11.0.3

[amcdnl]

In that situation, your project is compiling the typescript more than likely thus it working. The packaging of aot files must have been busted with the upgrade.

[amcdnl]

Looks like Material is having this issue too - https://github.com/angular/material2/issues/8229#issuecomment-342502556

[arlowhite]

Still get the subscribe error with 11.0.2

[amcdnl]

@arlowhite - published 11.0.3 with your PR.

[RutledgePaulV]

I'm having trouble applying the suggested workaround since my build isn't set up to compile sass (using webpack + ngtools + aot). Is there another fix in the works so we don't have to compile ngx-datatable ourselves?

[nitinht1988]

@amcdnl @solnat import {NgxDatatableModule} from '@swimlane/ngx-datatable/src' works only with AoT. in normal build it gives error. And import {NgxDatatableModule} from '@swimlane/ngx-datatable' works only in normal build, with AOT it gives error.

I am using 11.0.3.

Any solution?

[rsaulo]

Hi, same problem here, cannot build with AOT that receive "TypeError: Cannot read property 'subscribe' of undefined", but if i change the import works with AOT but does not work without...

[nitinht1988]

Hello,
Any update on this? Can anyone please ind out the solution for this? Its urgent !!!

[bopm]

The solution mentioned earlier working well to use for now.

[nitinht1988]

@bopm so for you Is it working for AOT as well as non AOT build?

[rsaulo]

we downgraded to 10.4.0.

[nitinht1988]

@rsaulo i am using angular 5. so will it work for that version?

[rsaulo]

We too, it's working, following our current setup :
Angular CLI: 1.6.0-beta.0
Node: 9.0.0
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.6.0-beta.0
@angular/flex-layout: 2.0.0-beta.10
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0-beta.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

[nitinht1988]

@rsaulo Yes, it's working...

[arlowhite]

11.0.3 with AOT is _NOT_ working. ('subscribe' of undefined)
Angular 5.0.1 and angular-cli 1.5.0

This only affects AOT builds. Please double-check that you are building with --aot and aren't still using the import from 'ngx-datatable/src' work-around.

I also updated to Angular CLI: 1.6.0-beta.0, but it didn't help.

11.0.3 just fixes TypeScript errors you may have encountered with the import from 'ngx-datatable/src' work-around.

[bopm]

Sadly, it's not working without aot with that workaround. So downgraded too.

[arlowhite]

@bopm import { } from 'ngx-datatable/src' only works when using AOT, so if you use this work-around, you need to use --aot all the time, even during development. i.e. ng serve --aot

[ychost]

i hava the same issue with angular 5 and ngx-datatable ^11.0.3
with --aot must with import {NgxDatatableModule} from '@swimlane/ngx-datatable/src';
without --aot must with import {NgxDatatableModule} from '@swimlane/ngx-datatable';

[nitinht1988]

The only solution for now is downgrading to 10.4.0.

[amcdnl]

@arlowhite - can you make me a demo project to test w/?

[arlowhite]

@amcdnl Here's a new angular-cli 1.5.0 project that reproduces the error:
https://github.com/arlowhite/simple-ngx-datatable

Just run:

1. npm install
2. npm start

npm start is configured in package.json to run in AOT mode: ng serve --aot

[mtabaj]

I have the same problem, my project is broken when compiled with aot

[lordgreg]

Same issue. :S

[ghost]

+1 for aot not working (Angular 5.0.1)

[JinsPeter]

Issue persists with Angular 5.0.1.

[Confusedfish]

Huge thanks for the pointer to the /src workaround, that got me back up and running having been scratching my head for a while over this. I take the point about the /src workaround not being so handy though as it makes non AOT development super slow.

The workaround I have in place is to modify the tsconfig-aot.json file (in the ngx-datatable project) as described here https://github.com/angular/angular/issues/19587

Having made the above change, recompiled ngx-datatable and reference that version instead I can use AOT and non AOT without the /src.

It sounds like the problem is to do with the TS version not being fully supported by Angular 5 as yet. The referenced solution is probably non ideal and should be backed out once Angular 5 supports TS 2.5+

[amcdnl]

Please try 11.0.4

[ghost]

Both regular and aot compilations working on Angular 5.0.1 ;)
Thanks a lot for a fix!

[ghost]

Yes, it works! Thanks!

[mtabaj]

It works, thanks!

[vesrah]

Success. Thank you

[JinsPeter]

Working. Thanks.

[nitinht1988]

Thank you @amcdnl for the fix. I am closing this issue as it is resolved.

[finalxcode]

@amcdnl thanks