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

Question

I have updated my angular project to Angular v11 which successfully updated. This brought a warning that TSLint is deprecated and following the steps outlined Here - Migrating from Codelyzer and TSLint I managed to migrate this.

After this update, I received several errors which I have an idea of how to solve, except this one error

 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

Below are the two components throwing this error

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;
  }
}

From the above two components, I can see that the common similarity is that both the files are using inline template: . Might this be causing the error while running ng lint ? How do I solve this?

Answer 1

My workaround was to move the html code in the component template to templateUrl.

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

Becomes

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

Answer 2

Seems to be a bug with ESlint/Angular configuration.

As a workaround, i added "endOfLine": "lf" to my prettier config which fixed the issue after reformatting the project.

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

Answer 3

I noticed this error too with templates that had escaped double quotes in them:

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

I solved it by switching to single quotes:

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