EsLinting multi-line inline-templates

[Bishares]

Hi everyone,

So I installed your project in my Angular project, and it works like a charm. Thanks for the great addition to eslint 👯.
However EsLint complains in my *.component.ts files whenever I declare them with inline-templates that are defined in a multi line fashion like this:

Multi-lined-variant, throws error (i removed all unnecessary parts of the Component):

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

@Component({
  selector: 'myProj-dialog-component',
  template: `
  <div></div>
  `
})
export class DialogComponent{
  constructor() {}
}

The Error Message looks like this:

Error: Debug Failure. False expression: position cannot precede the beginning of the file
    at computeLineOfPosition (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\typescript\lib\typescript.js:8934:22)
    at computeLineAndCharacterOfPosition (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\typescript\lib\typescript.js:8912:26)
    at Object.getLineAndCharacterOfPosition (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\typescript\lib\typescript.js:8953:16)
    at SourceFileObject.getLineAndCharacterOfPosition (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\typescript\lib\typescript.js:143309:23)
    at preprocess (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\@angular-eslint\eslint-plugin-template\dist\index.js:1:1858)
    at Linter._verifyWithProcessor (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\eslint\lib\linter\linter.js:1292:30)
    at Linter._verifyWithConfigArray (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\eslint\lib\linter\linter.js:1264:25)
    at Linter.verify (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\eslint\lib\linter\linter.js:1226:25)
    at Linter.verifyAndFix (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\eslint\lib\linter\linter.js:1416:29)
    at verifyText (C:\Users\Bishares\IdeaProjects\myProj\frontend\node_modules\eslint\lib\cli-engine\cli-engine.js:224:48)
preprocess: ERROR could not parse @Component() metadata C:\Users\Bishares\IdeaProjects\myProj\frontend\projects\@profect\myProj-core-lib\src\lib\component\notification\dialog.component.ts

Single-lined-variant, works fine (i removed all unnecessary parts of the Component):

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

@Component({
  selector: 'myProj-dialog-component',
  template: `<div></div>`
})
export class DialogComponent{
  constructor() {}
}

Is there maybe a setting I couldn't find? Something to activate multi-line inline-templates?

[JamesHenry]

Hi @Bishares I am struggling to reproduce this with the latest version.

Steps I took:

• Went into the real Angular CLI workspace which lives in the integration-tests package in this repo
• Picked src/example.component.ts because it already uses a multi-line inline template
  • I renamed it to example.dialog.ts
  • I applied your source code from above

The linting runs without issue.

Please make sure you are using the supported versions of ESLint and Angular as per the usage in this repo. If that is the case and it is still an issue, please can you work on putting together a minimal reproduction?

[Bishares]

Hi @Bishares I am struggling to reproduce this with the latest version.

Steps I took:

• Went into the real Angular CLI workspace which lives in the integration-tests package in this repo

• Picked src/example.component.ts because it already uses a multi-line inline template

  • I renamed it to example.dialog.ts
  • I applied your source code from above

The linting runs without issue.

Please make sure you are using the supported versions of ESLint and Angular as per the usage in this repo. If that is the case and it is still an issue, please can you work on putting together a minimal reproduction?

So that means some incompatible dependency in my package.json is probably causing this error? Im working on that project on monday again. I'll try to set up a reproduceable environment then.

[Bishares]

Alright so I'm using Angular 9.
I looked at your example repo and took all devDependencies of your package.json that you used before your upgrade to Angular 10. (The Version before this commit: 37e4cb2 ). Sadly it didn't fix the issue, I'll set up an example repo now, it might take a couple of hours. I've never done that on github before.

[JamesHenry]

@Bishares I’m afraid it’s just not feasible for us to support multiple major versions of Angular right now, so if your issue occurs on v9 then it will not be addressable.

Once we hit 1.0 and are “stable”, figuring out a way to have better support for older versions of angular (and therefore multiple versions at the same time) will be a priority.

I’ll close this for now, please feel free to reopen if you can reproduce on the latest major versions of the dependencies.

[Bishares]

Yea so I was able to get rid of the error by just avoiding inline templates, that works for now I guess.
I'll probably upgrade to Angular 10 within the next couple of months and see if it disappears that way.

I have also set up a minimal example of my project here.
Sadly the error doesn't occur there, not sure why its not coming up. It uses the same dependencies in its package.json.