Column numbers are off by one when codelyzer reports errors in template files
- Dominant language
- TypeScript
- Stars
- 2.5k
- Forks
- 232
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Column numbers are off by one when codelyzer reports errors in template files (works fine in inline templates).
With an inline template, errors are reported at the syntax element causing the error:

```
$ node_modules/.bin/tslint src/app/app.component.ts
ERROR: src/app/app.component.ts:8:29 - Avoid using '$any' in templates
ERROR: src/app/app.component.ts:9:26 - Invalid binding syntax. Use [(expr)] instead
```
If we replace inline (`template`) with file (`templateUrl`), errors are reported one character to the left of the element causing the error:

```
$ node_modules/.bin/tslint src/app/app.component.ts
ERROR: src/app/app.component.html:3:18 - Avoid using '$any' in templates
ERROR: src/app/app.component.html:4:15 - Invalid binding syntax. Use [(expr)] instead
```
If we move the element causing the error to the start of the line:
```html
Welcome to {{
$any(title) }}!
```
The error is actually reported on the previous line:
```
$ node_modules/.bin/tslint src/app/app.component.ts
ERROR: src/app/app.component.html:3:18 - Avoid using '$any' in templates
```
I haven't checked all rules that report errors in templates, but it seems to affect most of them (see example with `template-no-any` and `template-banana-in-box` below, also reproducible with `template-acessibility-` rules).
This is probably a non-issue when using codelyzer via the CLI, but would be relevant for editor integrations where it is important to highlight the correct element (I'm trying to extend [Intellij IDEA's tslint support](https://github.com/JetBrains/intellij-plugins/tree/master/tslint) to include codelyzer errors, but I'm not sure if it will ultimately work).
So feel free to take this into account when deciding the issue's priority...
**To Reproduce**
To reproduce, create a new Angular project (either via Angular CLI or manually) with the tslint.json, app.component.ts and app.component.html files below, then invoke `node_modules/.bin/tslint app.component.ts`
**Code**
tslint.json
```json
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"template-no-any": true,
"template-banana-in-box": true
}
}
```
app.component.ts
```typescript
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'codelyzer-offsets-bug';
fontSizePx: any;
}
```
app.component.html
```html
Welcome to {{ $any(title) }}!
```
**Expected behavior**
For the example code above, the expected behavior would be to have `template-no-any` report an error at 3:19 (actually reported at 3:18), `template-banana-in-box` error at 4:16 (actually reported at 4:15).
**Environment**
- Version [e.g. 22]: 5.1.0
- OS: [e.g. iOS]: macOS
- Node.js version: 10.5.0
- Package manager (yarn/npm) version: npm v.6.4.1
- Angular version: 8.1.2
- tslint version: 5.18
Contributor guide
Research direction
Reproduce the diagnostics with tslint.json, app.component.ts, and app.component.html using the listed template-no-any and template-banana-in-box rules. Compare the reported locations with the expected columns 3:19 and 4:16, including the case where an element starts a line; done means external-template errors identify the offending syntax element accurately.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100