时间戳

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

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

问题描述

我已将我的 Angular 项目更新为成功更新的 Angular v11。这带来了一个已弃用的警告，TSLint并按照此处概述的步骤 - 从 Codelyzer 和 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() {
  }
}

跳过链接.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;
  }
}

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

标签： javascriptangulartypescriptangular-testangular11

解决方案

我的解决方法是将组件模板中的 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']
})

推荐阅读