CODEWITHSUNDEEP
javascripthtmlangular
Juke
Juke

Reputation: 1436

How to read and understand angular template parser errors

I have got an error while I was writing the code in angular 

Uncaught Error: Template parse errors:
Parser Error: Unexpected token '.' at column 17 in [name: {{uppercase | hero.name }}] in ng:///AppModule/HeroesComponent.html@4:5 ("
<div>
  <span>id: </span> {{hero.id}}</div>
<div>[ERROR ->]name: {{uppercase | hero.name }}</div>"): ng:///AppModule/HeroesComponent.html@4:5
The pipe 'hero' could not be found ("
<div>
  <span>id: </span> {{hero.id}}</div>
<div>name: {{[ERROR ->]uppercase | hero.name }}</div>"): ng:///AppModule/HeroesComponent.html@4:13
    at syntaxError (compiler.js:486)
    at TemplateParser.parse (compiler.js:24674)
    at JitCompiler._parseTemplate (compiler.js:34629)
    at JitCompiler._compileTemplate (compiler.js:34604)
    at eval (compiler.js:34505)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34505)
    at eval (compiler.js:34375)
    at Object.then (compiler.js:475)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)

I understand this error but what is column 17 and herosComponent:@4:5 my html looks like

<h2>{{hero.name}} Details </h2>

<div>
  <span>id: </span> {{hero.id}}</div>
<div>name: {{uppercase | hero.name }}</div>

Can you explain what exactly is 17 and 4:5

Upvotes: 1

Views: 362

Answers (1)

yurzui
yurzui

Reputation: 214067

Unexpected token '.' at column 17 in [name: {{uppercase | hero.name }}] in ng:///AppModule/HeroesComponent.html@4:5

means that you need to open template of HeroesComponent. It looks like:

<h2>{{hero.name}} Details </h2>

<div>
  <span>id: </span> {{hero.id}}</div>
<div>name: {{uppercase | hero.name }}</div>

then find @4:5 i.e. line 4 and column 5.

The column and line numbers are 0-based in angular compiler. So:

0. <h2>{{hero.name}} Details </h2>
1.
2.<div>
3.  <span>id: </span> {{hero.id}}</div>
4. <div>name: {{uppercase | hero.name }}</div>
        ^
   012345

Now let's examine what exactly 17 means.

Angular parses interpolation but doesn't show exactly where it starts but rather shows place where TextNode starts:

name: {{uppercase | hero.name }}

in your case.

On the other hand parser show errors in interpolation starting with the place where interpolation starts itself:

name: {{uppercase | hero.name }}
        ^
     from here

name: {{uppercase | hero.name }}
                         ^
        01234567.........17

See also

Upvotes: 2

Related Questions