Búsqueda de sitios web

html - Cómo verificar nombres de propiedades incorrectos en tiempo de compilación en Angular


Estoy comenzando con Angular y construyendo algunas aplicaciones de práctica. Mi experiencia es principalmente con knockout.js, y hasta ahora me gusta bastante mucho de lo que estoy viendo en Angular 2/4.

Sin embargo, hay algo que me resulta un poco extraño. En el proceso de aprendizaje, he cometido varios errores de ortografía o de propiedades (como olvidarme de usar la variable del bucle en un ngFor), y aun así ni VS Code, ni el linter de la CLI, ni Angular mismo arrojan ningún error. Por ejemplo, si tengo una propiedad llamada myProperty en el archivo .ts de mi componente, y accidentalmente escribo {{myProporty}} en mi plantilla html, no obtengo ningún error. Solo aparece un espacio en blanco y ningún resultado, y depende de mí intentar averiguar qué hice mal. En una plantilla sencilla esto es lo suficientemente fácil, pero al menos una vez me demoró un buen rato mientras intentaba descubrir qué había pasado.

Noté que el linter en realidad sí lanza un error si la plantilla se declara en línea en la etiqueta @Component del decorador. En este caso, ejecutar ng lint me da el error, La propiedad "myProporty" que estás tratando de acceder no existe en la declaración de la clase. Sin embargo, no se lanza tal error si mi plantilla está en su propio archivo html.

No estoy seguro de si hay una configuración "estricta" que haya pasado por alto, o si tal vez esto es solo un problema de la herramienta, pero parece extraño que no haya ningún tipo de verificación sobre este tipo de cosas. VS Code tampoco parece tener ningún tipo de intellisense para estas cosas, aunque eso podría ser un problema de VS Code, no lo sé.

Solo me pregunto si alguien conoce un complemento que pueda verificar estas cosas, o si hay un comando de CLI que me haya perdido o algo así.

Respuesta #1

Tal vez alguien más conozca una mejor solución, pero busqué en Google y parece que esta validación de HTML es un área en desarrollo continuo de Angular.

Mientras tanto, encontré una extensión útil de VS Code que solucionó mi problema de IntelliSense: https://github.com/angular/vscode-ng-language-service

La última versión (0.1.5) parece estar rota, pero la 0.1.4 me dio intellisense para todas mis plantillas html, lo cual ayudará bastante, creo.