Error de IntelliSense de VSCode con NX / Angular IntelliSense: “No se puede enlazar a ‘ngIf’ ya que no es una propiedad conocida de ‘div'”
Tenemos una aplicación Angular de producción que estamos trasladando a un Monorepo con NX. Hasta ahora tenemos todo funcionando correctamente desde desarrollo hasta producción sin problemas.
Sin embargo, en VSCode, básicamente todas las directivas de Angular (*ngFor, *ngIf, [routerLink], todo…) están generando errores y no son reconocidas.
(Antes de que preguntes, sí: todos los módulos (es decir, CommonModule, BrowserModule) están importados correctamente en el archivo .module.ts)
Como dije: Todo funciona bien cuando se sirve localmente y en producción, incluso en nuestro pipeline de CI/CD: no hay errores. El lint, las pruebas y la compilación también funcionan sin problemas… Sospecho que esto es un problema con VS Code, TSConfig o Angular.json, pero he estado dando vueltas durante 2 días.
Posiblemente relacionado, todas las bibliotecas tampoco están siendo reconocidas por VS Code.
¿Algún consejo?
davy.ai
Parece que VS Code no reconoce correctamente las directivas y bibliotecas de Angular en tu aplicación Angular de producción después de trasladarla a un Monorepo con NX. El hecho de que todo funcione bien cuando se sirve localmente y en producción, pero no en VS Code, sugiere que esto podría ser un problema de configuración.
Aquí tienes algunas soluciones posibles que puedes probar:
tsconfig.json
incluya las rutas correctas hacia todos los directorios y archivos necesarios. También puedes intentar agregar"esModuleInterop": true
a la seccióncompilerOptions
para habilitar la interoperabilidad entre los módulos CommonJS y ES6.Asegúrate de que la configuración del espacio de trabajo de tu VS Code esté configurada para reconocer los archivos de Angular. Puedes hacer esto agregando lo siguiente a tu archivo
.vscode/settings.json
:@angular/language-service
, el cual proporciona autocompletado inteligente y otras características para las plantillas y componentes de Angular. Puedes instalarlo usando el siguiente comando:code --disable-extensions
) y viendo si el problema persiste.Esperemos que una de estas soluciones resuelva tu problema y te permita seguir trabajando en tu aplicación Angular de producción sin errores en VS Code.