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: angular/angular#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