预处理：错误无法解析 @Component() 元数据路径/到/my.component.ts答案

【问题标题】：preprocess: ERROR could not parse @Component() metadata path/to/my.component.ts预处理：错误无法解析 @Component() 元数据路径/到/my.component.ts
【发布时间】：2021-03-04 19:07:31
【问题描述】：

我已将我的 Angular 项目更新为成功更新的 Angular v11。这带来了一个警告，TSLint 已被弃用，并按照Here - Migrating from Codelyzer and TSLint 概述的步骤进行了迁移。

在这次更新之后，我收到了几个错误，我知道如何解决，除了这个错误

 Error: Debug Failure. False expression: position cannot precede the beginning of the file
    at computeLineOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8934:22)
    at computeLineAndCharacterOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8912:26)
    at Object.getLineAndCharacterOfPosition C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8953:16)
    at SourceFileObject.getLineAndCharacterOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:143309:23)
    at preprocess (C:\Path\to\Project\node_modules\@angular-eslint\eslint-plugin-template\dist\index.js:1:1430)
    at Linter._verifyWithProcessor (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1292:30)
    at Linter._verifyWithConfigArray (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1264:25)
    at Linter.verify (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1226:25)
    at Linter.verifyAndFix (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1416:29)
    at verifyText (C:\Path\to\Project\node_modules\eslint\lib\cli-engine\cli-engine.js:239:48)
preprocess: ERROR could not parse @Component() metadata C:\Path\to\Project\src\app\components\label-star-required\label-star-required.component.ts
Error: Debug Failure. False expression: position cannot precede the beginning of the file
    at computeLineOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8934:22)
    at computeLineAndCharacterOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8912:26)
    at Object.getLineAndCharacterOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:8953:16)
    at SourceFileObject.getLineAndCharacterOfPosition (C:\Path\to\Project\node_modules\typescript\lib\typescript.js:143309:23)
    at preprocess (C:\Path\to\Project\node_modules\@angular-eslint\eslint-plugin-template\dist\index.js:1:1430)
    at Linter._verifyWithProcessor (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1292:30)
    at Linter._verifyWithConfigArray (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1264:25)
    at Linter.verify (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1226:25)
    at Linter.verifyAndFix (C:\Path\to\Project\node_modules\eslint\lib\linter\linter.js:1416:29)
    at verifyText (C:\Path\to\Project\node_modules\eslint\lib\cli-engine\cli-engine.js:239:48)
preprocess: ERROR could not parse @Component() metadata C:\Path\to\Project\src\app\components\skip-link\skip-link.component.ts

以下是引发此错误的两个组件

label-star-required.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-label-star-required',
  templateUrl: './label-star-required.component.html',
  styleUrls: ['./label-star-required.component.css']
})
export class LabelStarRequiredComponent {
  constructor() {
  }
}

@Component({
  selector: 'app-star-required',
  template: `
    <span class='icon-star required'></span>
  `,
  styleUrls: ['./label-star-required.component.css']
})

export class StarRequiredComponent {
  constructor() {
  }
}

skip-link.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { filter, takeWhile, map } from 'rxjs/operators';
@Component({
  selector: 'app-skip-link',
  styleUrls: ['./skip-link.component.css'],
  template: `
    <a [href]="skipLinkPath" class="skip-main">Skip to main content</a>
  `
})
export class SkipLinkComponent implements OnInit, OnDestroy {
  skipLinkPath: string;
  componentIsActive: boolean;
  constructor(
    private router: Router
  ) { }
  ngOnInit() {
    this.componentIsActive = true;
    this.skipLinkPath = `${this.router.url.replace('#main', '')}#main`;
    this.router.events.pipe(filter(event => event instanceof NavigationStart))
      .pipe(takeWhile(() => this.componentIsActive))
      .pipe(map(event => (event as any).url ))
      .subscribe(url => {
        if (!/(.)#main$/.test(url)) {
          this.skipLinkPath = `${url}#main`;
        }

      });
  }
  ngOnDestroy() {
    this.componentIsActive = false;
  }
}

从上面的两个组件中，我可以看出共同的相似之处是两个文件都在使用内联template: 。这可能会在运行 ng lint 时导致错误吗？我该如何解决？

【问题讨论】：

我遇到了同样的问题，还没有找到解决办法。但是，如果您删除模板文字前后的换行符，错误就会消失。
@PascalMathys 感谢您提供此信息，我已使用此
在反引号模板值中使用转义反引号时会引发相同的错误。

标签： javascript angular typescript angular-test angular11

【解决方案1】：

我也注意到了这个错误，模板中包含了双引号：

template: "<div class=\"my-class\"></div><ng-content></ng-content>"

我通过切换到单引号解决了它：

template: "<div class='my-class'></div><ng-content></ng-content>"

【讨论】：

【解决方案2】：

我的解决方法是将组件模板中的 html 代码移动到 templateUrl。

@Component({
  selector: 'app-star-required',
  template: `<span class='icon-star required'></span>`,
  styleUrls: ['./label-star-required.component.css']
})

变成

@Component({
  selector: 'app-star-required',
  templateUrl: './label-star-required.component.html',
  styleUrls: ['./label-star-required.component.css']
})

【讨论】：

【解决方案3】：

似乎是 ESlint/Angular 配置的错误。

作为一种解决方法，我在我更漂亮的配置中添加了“endOfLine”：“lf”，这在重新格式化项目后解决了这个问题。

见https://github.com/angular-eslint/angular-eslint/issues/185

【讨论】：