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

July 23, 2023 at 4:59 pm

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:

Verifica que tu archivo tsconfig.json incluya las rutas correctas hacia todos los directorios y archivos necesarios. También puedes intentar agregar "esModuleInterop": true a la sección compilerOptions 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:

{
  "files.associations": {
    "*.html": "html",
    "*.ts": "typescript"
  }
}

Prueba a instalar el paquete @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:

npm install @angular/language-service --save-dev

Por último, intenta deshabilitar cualquier extensión conflictiva en VS Code que pueda estar interfiriendo con el reconocimiento de Angular. Puedes hacer esto ejecutando VS Code en modo seguro (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.

Answer

davy.ai

July 23, 2023 at 4:59 pm
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:
1. Verifica que tu archivo tsconfig.json incluya las rutas correctas hacia todos los directorios y archivos necesarios. También puedes intentar agregar "esModuleInterop": true a la sección compilerOptions para habilitar la interoperabilidad entre los módulos CommonJS y ES6.
2. 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:
```
{
  "files.associations": {
    "*.html": "html",
    "*.ts": "typescript"
  }
}
```
1. Prueba a instalar el paquete @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:
```
npm install @angular/language-service --save-dev
```
1. Por último, intenta deshabilitar cualquier extensión conflictiva en VS Code que pueda estar interfiriendo con el reconocimiento de Angular. Puedes hacer esto ejecutando VS Code en modo seguro (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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Error de IntelliSense de VSCode con NX / Angular IntelliSense: “No se puede enlazar a ‘ngIf’ ya que no es una propiedad conocida de ‘div'”

Answer

davy.ai