Is there way to lint *.component.html files?

[johnny-mh]

Inline template are lint well.

But when i open *.component.html buffer, it doesn't work.

Is there any way to lint *.component.html files?

[ananthakumaran]

Can you explain the problem clearly? What doesn't work?

Please check jsx section for how to configure web-mode and tide. You probably need to change the jsx extension in the snippet to .component.html

[altschuler]

This is an issue with flycheck and tslint (+codelyzer), not tide. You can't see the errors reported by tslint for template files because flycheck doesn't know they're there (in turn because they are reported by linting the corresponding .ts file and not the .html file itself).

[perveziqbal]

typescript 2.4.1 seems to work with external angular templates too! https://github.com/Microsoft/TypeScript/issues/17229

[altschuler]

@perveziqbal Are you just enabling tide mode with HTML files? If so, how do you handle formatting and all the other "invalid" syntax errors that occur?

[perveziqbal]

If you are using typescript 2.3 or older, html files will be treated as typescript files when tide is enabled. Update typescript to 2.4.1. Also update angular/language-service. Add the following to tsconfig.json

"compilerOptions": {
    "plugins": [
			{ "name": "@angular/language-service"}
		]
  }

Enable web-mode and tide in html files.

[altschuler]

So, I've added the language service and web-mode, and enabled web-mode and tide in html files, but I'm still getting a huge amount of syntax errors because tide is checking the whole buffer. I looked at how to use web-mode with tide in the docs, but couldn't find anything except with tsx files which I suppose is not what I'm looking for.

Thanks for your help, I'm really excited about this :)

[perveziqbal]

I have created a repository on github, please see if that works for you. https://github.com/perveziqbal/angular-tide-demo.git

[josteink]

@perveziqbal Looking at that repo... If you need to modify tssserver.js for this to work, maybe you could consider sending a pull request to Microsoft about it?

[rtm]

@everedifice

Inline template are lint well.

What do you mean by "lint" in this case? What are you doing to get them to lint?

[johnny-mh]

@rtm While using Visual Studio Code. I can see that warning of using method that component class file doesn't have. See below example

// hello.component.ts

@Component({
  template: './hello.component.html'
})
export class HelloComponent {
}

// hello.component.html

<button type="button" (click)="sayHello()">click</button>
                               ~~~~~~~~~~

Visual Studio Code warning using sayHello() method because HelloComponent doesn't have sayHello method.

Currently If i use inline template (write template code into hello.component.ts) typescript-tide warning correctly. but external template file (hello.component.html) don't.

[jguenther]

FWIW I couldn't get tide-mode to work right in HTML buffers. Could be a problem with my specific config or something, but I got this to work pretty easily with lsp-mode using default config after installing the html-languageserver and the VSCode Angular language server

There's a wiki entry for this, but this should work:

npm install -g vscode-html-languageserver-bin

# the Angular language server isn't yet published on npm--see tracking issue:
#   https://github.com/angular/vscode-ng-language-service/issues/377
mkdir -p ~/.angular 
curl https://marketplace.visualstudio.com/_apis/public/gallery/publishers/Angular/vsextensions/ng-template/latest/vspackage | \
    tar -C ~/.angular -zxf -

and then turn on LSP in html-mode:

(after-load 'sgml-mode
  (add-hook 'html-mode-hook #'lsp-deferred))

Since LSP now supports multiple language servers per buffer, this all Just Works(TM) (or at least it did for me). Jump to definition, linting, etc, from ng HTML buffers all seems to work as I'd expect, and tide + LSP work together pretty seamlessly.

use-package config, ensure-system-package will install if the commands aren't available on your path:

(use-package lsp-mode
  :diminish "LSP"
  :ensure-system-package
  ((html-languageserver . "npm install -g vscode-html-languageserver-bin")
   ;; workaround until it's published on npm: https://github.com/angular/vscode-ng-language-service/issues/377
   ("~/.angular/extension/server/server.js" . "mkdir -p ~/.angular && curl https://marketplace.visualstudio.com/_apis/public/gallery/publishers/Angular/vsextensions/ng-template/latest/vspackage | tar -C ~/.angular -zxf -"))
  :hook ((html-mode . lsp-deferred)))