Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

language-service: Member (function) is not callable in ng-template #16643

Closed
kernwig opened this issue May 8, 2017 · 24 comments
Closed

language-service: Member (function) is not callable in ng-template #16643

kernwig opened this issue May 8, 2017 · 24 comments

Comments

@kernwig
Copy link

@kernwig kernwig commented May 8, 2017

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, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

As seen in demo for ngx-datatable project, this usage:

<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
    <span (click)="sort()">{{column.name}}</span>
</ng-template>

Results in an error of:

Error:(32, 2) Angular: Member sort is not callable

Expected behavior

No error. sortFn is a callable function and the code does in fact work correctly.

Minimal reproduction of the problem with instructions

Run demo for ngx-datatable through the language-service.

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

I like my error console to be empty. Having to constantly mentally process and dismiss this error in the IDE is unproductive.

Please tell us about your environment:

IntelliJ IDEA 2017.1.1
Build #IU-171.4073.35, built on April 6, 2017
JRE: 1.8.0_112-release-736-b16 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.4

  • Angular version: 4.0.3

  • Browser: N/A

  • Language: TypeScript 2.2.2

  • Node (for AoT issues): node --version = v7.9.0

@marcodelu

This comment has been minimized.

Copy link

@marcodelu marcodelu commented Jul 27, 2017

+1

1 similar comment
@MohibWasay

This comment has been minimized.

Copy link

@MohibWasay MohibWasay commented Oct 3, 2017

+1

@manekinekko

This comment has been minimized.

Copy link
Member

@manekinekko manekinekko commented Oct 24, 2017

@chuckjaz any updates on this?

@dark-bm

This comment has been minimized.

Copy link

@dark-bm dark-bm commented Nov 28, 2017

Any progress on this issue ?

@ThrownLemon

This comment has been minimized.

Copy link

@ThrownLemon ThrownLemon commented Dec 8, 2017

Progress? It's very annoying...

@freak0

This comment has been minimized.

Copy link

@freak0 freak0 commented Mar 9, 2018

Same happening here, using Angular 5.2.8.

@Morente5

This comment has been minimized.

Copy link

@Morente5 Morente5 commented Mar 12, 2018

Same here, tested on Angular 5.2.7 and 6.0.0-beta.7 regarding the same ng-bootstrap modal example referenced above.

@changhuixu

This comment has been minimized.

Copy link

@changhuixu changhuixu commented Mar 24, 2018

Same here, Angular 5.2.9 and ng-bootstrap 1.0.4.
ng build --prod works fine and my app also works.
Not sure why the intellisence complains.
Any progress on this issue?

@auderer

This comment has been minimized.

Copy link

@auderer auderer commented Apr 8, 2018

Same here, using VSCode.

@ihusnja4

This comment has been minimized.

Copy link

@ihusnja4 ihusnja4 commented Apr 12, 2018

Until this gets somehow fixed, you can workaround this by creating a trigger method and use it like this:

<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
    <span (click)="trigger(sort)">{{column.name}}</span>
</ng-template>

In component add the method:

@Component(...)... {
    ...
    trigger(callback, ...args) {
        return callback(...args);
    }
}
@Liero

This comment has been minimized.

Copy link

@Liero Liero commented May 3, 2018

Another workaround is proposed here: angular/vscode-ng-language-service#234 (comment)
I haven't tried it myself, but it makes sense.

@dombakargy

This comment has been minimized.

Copy link

@dombakargy dombakargy commented Jun 22, 2018

That's caused by "Angular Language Service" plugin in VS-Code. Just uninstall it.

@auderer

This comment has been minimized.

Copy link

@auderer auderer commented Jun 30, 2018

This workaround is working for me:

<ng-template let-column="column" let-sort="sortFn()" ngx-datatable-header-template>
    <span (click)="sort">{{column.name}}</span>
</ng-template>

By invoking the function inside the let- assignment instead of inside the (click) handler, you will avoid this bug and still get the same functionality.

@kyliau kyliau assigned kyliau and unassigned chuckjaz Sep 5, 2018
@barisbikmaz

This comment has been minimized.

Copy link

@barisbikmaz barisbikmaz commented Sep 28, 2018

All this workarounds will not work if you have to pass a template variable to the function.
As an example this will not work

<ng-template let-item="item" let-highlight="highlight(item)">
    <span (click)="highlight">{{item.name}}</span>
</ng-template>

this works

<ng-template let-item="item" let-highlight="highlight">
    <span (click)="highlight(item)">{{item.name}}</span>
</ng-template>

I have still this issue with angular-language-service 6.1.

@isaacplmann

This comment has been minimized.

Copy link

@isaacplmann isaacplmann commented Sep 28, 2018

The workaround that I use is this:

Instead of passing the highlight function directly, pass a fns object that has this content { highlight: highlight }

And use it like this with no errors:

<ng-template let-item="item" let-fns="fns">
  <span (click)="fns.highlight(item)">{{item.name}}</span>
</ng-template>
@barisbikmaz

This comment has been minimized.

Copy link

@barisbikmaz barisbikmaz commented Oct 2, 2018

@isaacplmann Thanks for the workaround.
But what I mean is that the code actually works. It's just the angular-language-service complaining. So either they fix this error message officially or recommend another way. I don't wonna really have workarounds in my code which nobody understands in few months.

@Darkein

This comment has been minimized.

Copy link

@Darkein Darkein commented Oct 31, 2018

I've got the same problem and found another workaround: use fn.call(thisArg, ...args)

<ng-template ng-label-tmp ng-label-tmp let-item="item" let-clear="clear">
    <span (click)="clear.call(undefined, item)">clear</span>
</ng-template>
@kyliau kyliau added the freq1: low label Dec 6, 2018
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Dec 6, 2018
@kyliau kyliau added the freq3: high label Dec 6, 2018
@kyliau kyliau removed the freq1: low label Dec 6, 2018
@jerguslejko

This comment has been minimized.

Copy link

@jerguslejko jerguslejko commented Dec 25, 2018

any updates?

@ryansheehan

This comment has been minimized.

Copy link

@ryansheehan ryansheehan commented Jun 20, 2019

Almost six more months. Still running into this issue. Worked around by boxing the function in an object.

@priscilalima

This comment has been minimized.

Copy link

@priscilalima priscilalima commented Jun 25, 2019

any updates?

@jpike88

This comment has been minimized.

Copy link

@jpike88 jpike88 commented Sep 3, 2019

@kyliau this one is a real annoyance.

Type Function should be callable.

kyliau added a commit to kyliau/angular that referenced this issue Nov 13, 2019
This commit fixes a long standing bug whereby a template variable that
gets initialized to a class method gets resolved to the Any type, thus
when it is called the language service produces error "Member X is not
callable".

PR closes angular#16643
PR closes angular/vscode-ng-language-service#234
kyliau added a commit to kyliau/angular that referenced this issue Nov 13, 2019
This commit fixes a long standing bug whereby a template variable that
gets initialized to a class method gets resolved to the Any type, thus
when it is called the language service produces error "Member X is not
callable".

PR closes angular#16643
PR closes angular/vscode-ng-language-service#234
kyliau added a commit to kyliau/angular that referenced this issue Nov 13, 2019
This commit fixes a long standing bug whereby a template variable that
gets initialized to a class method gets resolved to the Any type, thus
when it is called the language service produces error "Member X is not
callable".

PR closes angular#16643
PR closes angular/vscode-ng-language-service#234
@kyliau

This comment has been minimized.

Copy link
Member

@kyliau kyliau commented Nov 13, 2019

Sorry it took so long, #33782 should fix this.

kyliau added a commit to kyliau/angular that referenced this issue Nov 14, 2019
This commit fixes a long standing bug whereby a template variable that
gets initialized to a class method gets resolved to the Any type, thus
when it is called the language service produces error "Member X is not
callable".

PR closes angular#16643
PR closes angular/vscode-ng-language-service#234
alxhub added a commit that referenced this issue Nov 15, 2019
This commit fixes a long standing bug whereby a template variable that
gets initialized to a class method gets resolved to the Any type, thus
when it is called the language service produces error "Member X is not
callable".

PR closes #16643
PR closes angular/vscode-ng-language-service#234

PR Close #33782
@alxhub alxhub closed this in 1d3aae6 Nov 15, 2019
@Siedlerchr

This comment has been minimized.

Copy link

@Siedlerchr Siedlerchr commented Dec 4, 2019

I am still experiencing this error with language service 0.900.0 in combination with transloco, See for an example:
ngneat/transloco#177

@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Jan 4, 2020

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 4, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.