预处理：错误无法解析@Component() 元数据path/to/my。component.ts

Question

我已将我的 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() {
  }
}

跳过-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 导致错误的原因吗？我该如何解决？

Answer 1

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

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

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

Answer 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']
})

Answer 3

我也注意到这个错误，模板中的双引号被转义了：

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

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

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

预处理：错误无法解析@Component() 元数据path/to/my。component.ts

preprocess: ERROR could not parse @Component() metadata path/to/my.component.ts

javascript

typescript

angular

angular-test

angular11