propName.toLowerCase is not a function

[Will-at-FreedomDev]

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

[alan-agius4]

@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)```

[noobyogi0010]

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

[alan-agius4]

@noobyogi0010 go for it.

[noobyogi0010]

Okay, thanks!
@alan-agius4

[angular-automatic-lock-bot]

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.}