javascript - 如何阅读和理解 Angular 模板解析器错误

Question

我在用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)

我理解这个错误，但是第 17 列和 herosComponent:@4:5 是什么我的 html 看起来像

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

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

你能解释一下 17 和 4:5 到底是什么吗

Answer 1

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

表示需要打开HeroesComponent的模板。看起来像:

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

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

然后找到 @4:5 即第 4 行和第 5 列。

列号和行号在 Angular 编译器中是从 0 开始的。所以:

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

现在让我们检查一下 17 到底是什么意思。

Angular 解析插值但不准确显示它的开始位置而是显示 TextNode 开始的位置:

name: {{uppercase | hero.name }}

在你的情况下。

另一方面，解析器从插值开始的地方开始显示插值错误:

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

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

另见

• https://github.com/angular/angular/issues/20948

• https://medium.com/@a.yurich.zuev/catch-angular-template-errors-like-a-pro-or-how-i-create-angular-demo-e98694977911