Skip to content

propName.toLowerCase is not a function #46936

New issue
New issue
Closed
Closed
propName.toLowerCase is not a function#46936
Assignees
JoostK
Labels
area: compilerIssues related to `ngc`, Angular's template compilerbugstate: has PR
Milestone
needsTriage

Description

@Will-at-FreedomDev
Will-at-FreedomDev
opened on Jul 21, 2022

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

I think I've narrowed down the reason for this error. I created an @Input() binding with the name valueOf. I think the angular compiler doesn't like this name for some reason, but I can't find any documentation on this being the case. I forked one of the Angular Material examples and updated the example a bit to demonstrate the error.

@Component({
  selector: 'app-value-of',
  template: '{{valueOf("abc")}}'
})
export class ValueOfComponent {
  @Input() valueOf: (s: string) => any = (s: string) => s;
}

@Component({
  selector: 'autocomplete-filter-example',
  template: '<app-value-of [valueOf]="myValueOf"></app-value-of>',
})
export class AutocompleteFilterExample {
  myValueOf = (s: string) => 'something else';
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-jyiqdv?file=src%2Fapp%2Fvalue-of.component.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fautocomplete-filter-example.ts,src%2Fapp%2Fautocomplete-filter-example.css,src%2Fapp%2Fautocomplete-filter-example.html

Please provide the exception or error you saw

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: propName.toLowerCase is not a function
    at eval (/home/projects/angular-jyiqdv/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18)

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: propName.toLowerCase is not a function
    at eval (/home/projects/angular-jyiqdv/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18)

Please provide the environment you discovered this bug in (run ng version)

This information can be found in the stackblitz reproduction. Looks like version 14.

Anything else?

No response

Activity

  1. alxhub
    transferred this issue fromangular/angularon Jul 22, 2022

  2. alan-agius4 commented on Jul 22, 2022

    @alan-agius4
    alan-agius4
    on Jul 22, 2022
    Contributor

    @alxhub, this seems to be caused by the compiler.

    $ ngc -p tsconfig.app.json
error TS500: TypeError: propName.toLowerCase is not a function
    at DomElementSchemaRegistry.securityContext (file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:14884:29)
    at file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15433:71
    at Array.map (<anonymous>)
    at file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15433:43
    at Array.forEach (<anonymous>)
    at calcPossibleSecurityContexts (file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15428:33)
    at BindingParser.createBoundElementProperty (file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15316:32)
    at file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15792:48
    at Array.forEach (<anonymous>)
    at HtmlAstToIvyAst.extractAttributes (file:///xxxxxx/node_modules/@angular/compiler/fesm2015/compiler.mjs:15783:20)```
  3. alan-agius4
    transferred this issue fromangular/angular-clion Jul 22, 2022
  4. alan-agius4
    added
    area: compilerIssues related to `ngc`, Angular's template compiler
    on Jul 22, 2022
  5. ngbot
    added this to the needsTriage milestone on Jul 22, 2022
  6. alan-agius4
    changed the title [-]propName.toLowerCase is not a function in node_modules/@ngtools/webpack/ivy/loader.js[/-] [+]propName.toLowerCase is not a function[/+] on Jul 22, 2022
  7. alan-agius4
    added
    bug
    on Jul 22, 2022

  8. noobyogi0010 commented on Jul 22, 2022

    @noobyogi0010
    noobyogi0010
    on Jul 22, 2022

    Hey, @alan-agius4
    I would like to work on this issue if no one else has already taken it up.
    Thanks!

  9. alan-agius4 commented on Jul 22, 2022

    @alan-agius4
    alan-agius4
    on Jul 22, 2022
    Contributor

    @noobyogi0010 go for it.

  10. noobyogi0010 commented on Jul 25, 2022

    @noobyogi0010
    noobyogi0010
    on Jul 25, 2022

    Okay, thanks!
    @alan-agius4

  11. JoostK
    self-assigned this
    on Aug 22, 2022
  12. AndrewKushnir
    closed this as completedin cf0c53aon Sep 6, 2022
  13. AndrewKushnir
    added a commit that references this issue on Sep 6, 2022

    fix(compiler): avoid errors for inputs with Object-builtin names (#47220

    0e35829

  14. angular-automatic-lock-bot commented on Oct 7, 2022

    @angular-automatic-lock-bot
    angular-automatic-lock-botBot
    on Oct 7, 2022

    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.

  15. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Oct 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

area: compilerIssues related to `ngc`, Angular's template compilerbugstate: has PR

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions