Vscode-ng-language-service: Los componentes de los módulos reexportados no detectados por el servicio de idiomas en las plantillas HTML

Creado en 11 abr. 2017  ·  22Comentarios  ·  Fuente: angular/vscode-ng-language-service

Dado que angular / material2-2.0.0-beta.3 anunció que el MaterialModule que exportó todos los componentes del material quedará obsoleto en la próxima versión, decidí seguir sus consejos y crear mi propia aplicación específica AppMaterialModule donde incluí solo los módulos de material que uso uno por uno.

// app-material.module.ts
import { NgModule } from '@angular/core';
import {
  MdInputModule,
  etc...
} from '@angular/material'

@NgModule({
  imports: [],
  exports: [
    MdInputModule,
    etc...
  ],
  declarations: [],
  providers: [],
})
export class AppMaterialModule { }

Aquí está mi archivo app.module.ts también:

@NgModule({
  imports: [
    CoreModule,
    AppMaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,
    SharedModule.forRoot()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Probé mi aplicación y funciona de la misma manera que antes de reemplazar MaterialModule . Sin embargo, cuando abrí un archivo de plantilla HTML, noté que se muestran errores en todos los componentes de material utilizados.

Todos tienen el mismo error:

[Angular]
'md-input-container' is not a known element:
1. If 'md-input-container' is an Angular component, then verify that it is part of this module.
2. If 'md-input-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

ng-lang-service-bug

Espero que esta sea una explicación útil del problema que tengo. Si necesita más información, estaré encantado de proporcionársela.

bug

Comentario más útil

Creo que el servicio de idiomas no aplica correctamente tsconfig compilerOptions. Tengo un mapeo de ruta allí y los módulos importados con ese mapeo no se reconocen, lo que para mí da como resultado el mismo problema que se describe aquí.

@chuckjaz : he reproducido el problema aquí: https://github.com/mjamin/vscode-ng-language-service-repro

Tsconfig.json define un mapeo de ruta que se usa en app.module.ts para importar el BarModule . El componente declarado en ese módulo no es reconocido por el servicio de idiomas en app.component.html

Todos 22 comentarios

¿Me pueden enviar un enlace a un repositorio que reproduzca este problema o adjuntar un archivo .zip que pueda descomprimir que demuestre esto?

Verificando que encontré este problema exacto en VSCode siguiendo la misma recomendación (crear un módulo de material específico de la aplicación) que @ tsvetan-ganev.

@chuckjaz , aquí hay un proyecto comprimido que descargué de plnkr porque no pude averiguar cómo compartir el enlace al proyecto real allí. Perdón por las molestias, pero literalmente pasé 20 minutos tratando de compartir un enlace a mi proyecto.
ng-material.zip

@ tsvetan-ganev No pude reproducir el problema que está experimentando con el archivo .zip que proporcionó porque no contiene un proyecto completo. ¿Puede incluir uno que tenga archivos package.json y tsconfig.json válidos?

Encontré lo que podría ser un error relacionado, https://github.com/angular/angular/issues/15969. Esto se debió a que @angular/animations no se instaló junto con @angular/material .

Creo que el servicio de idiomas no aplica correctamente tsconfig compilerOptions. Tengo un mapeo de ruta allí y los módulos importados con ese mapeo no se reconocen, lo que para mí da como resultado el mismo problema que se describe aquí.

@chuckjaz : he reproducido el problema aquí: https://github.com/mjamin/vscode-ng-language-service-repro

Tsconfig.json define un mapeo de ruta que se usa en app.module.ts para importar el BarModule . El componente declarado en ese módulo no es reconocido por el servicio de idiomas en app.component.html

@mjamin , ¿tienes alguna solución todavía?

Yo también tengo este problema. Parece ocurrir siempre que haya módulos compartidos que también importe en cada componente. Parece que el servicio ignora las definiciones proporcionadas por los módulos importados que se reexportan. Hice un módulo compartido que reexporta los elementos que importa y declara (incluido CommonModule, un módulo en cuestión), y cuando importo este módulo a otros módulos, Angular (4) comprende las importaciones, pero Angular Language Service no puede encontrar CommonModule o mi componente personalizado, aunque se exportan en mi módulo compartido.

@chuckjaz @mjamin Hice una reproducción diferente del problema que encontré que más de cerca (creo) coincide con la descripción https://github.com/Nerketur/shared-ng-module-test

No parece tener nada que ver con las opciones del compilador, ya que todo este proyecto usa todo por defecto.

Cuando dijo que ALS no puede encontrar CommonModule / su componente personalizado, ¿quiere decir que la función de autocompletar de ALS no funciona cuando intenta usar CommonModule / componente personalizado?

Autocompletar no funciona y aparecen líneas de error rojas con el error:
"[Angular]
'app-testing' no es un elemento conocido:

  1. Si 'app-testing' es un componente angular, verifique que sea parte de este módulo.
  2. Si 'app-testing' es un componente web, agregue 'CUSTOM_ELEMENTS_SCHEMA' a '@ NgModule.schemas' de este componente para suprimir este mensaje ".

(usando el repositorio que acabo de proporcionar)

Estoy en el proceso de convertir este proyecto para usar la nueva arquitectura de plugin de mecanografiado y he tardado en solucionar estos errores. Lo siento por eso.

Pasaré por el trabajo pendiente una vez que tengamos ordenada la arquitectura del complemento.

@chuckjaz no te preocupes. Agradecido de que estés poniendo tanto esfuerzo en ello. Se está acercando;)

¿Hay una solución para esto?

También tengo este problema. Solo me pregunto si hay alguna actualización, ya que me encantaría seguir usando este complemento.

Creo que esto soluciona el problema: https://github.com/angular/vscode-ng-language-service/issues/108

Simplemente use rutas relativas al importar todo, incluidos los módulos compartidos, y las importaciones en esos módulos compartidos, es decir, todas las importaciones deben tener rutas relativas. Y luego se reconocerán las reexportaciones.

@ tx8821 que funcionó gracias. ¡Lo suficientemente bueno por ahora! Me alegro de poder usarlo de nuevo, ¡la mejor característica de la v4!

@ tx8821 ¡ gracias por la solución! Pero esto no es una solución, es solo una muleta más en el código. Esperará una solución real

Al tener el mismo problema, me encantaría ver una solución en lugar de usar rutas relativas (¡uf!). ¡Gracias por su arduo trabajo hasta ahora! :)

La aplicación múltiple Ionic 4 (monorepo) me trajo aquí.
Lamentablemente, Ionic requiere un package.json para cada aplicación. En otras palabras: tengo 3 proyectos en uno. 2 aplicaciones y la raíz. Cada paquete json es más o menos igual. De todos modos ... esta es la estructura de mi espacio de trabajo (fragmento):

root
|- apps
|  |- app1
|  |  |- package.json
|  |  |- tsconfig.json
|  |- app2
|     |- package.json
|     |- tsconfig.json
|- lib
|  |- (export stuff like components)
|- package.json
|- tsconfig.json
|- angular.json (with all apps defined)

tsconfig.json de una aplicación:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@lib/*": ["../../lib/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Puedo importar HelloWorldComponent desde lib.
Pero en html me sale el error:

'app-hello-world' is not a known element:
1. If 'app-hello-world' is an Angular component, then verify that it is part of this module.
2. If 'app-hello-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular

Angular-Language-Service debería funcionar porque HelloWorldComponent está declarado en app.module.ts. Extraño. ¿Quizás es porque la carpeta está fuera de la aplicación src? La ruta de alias @lib es solo un atajo. También probé sin una importación directa del Componente. Todavía error.

¿Quizás este debería ser un tema nuevo?

Solíamos implementar lógica personalizada para descubrir y analizar tsconfig.json y asignaciones de ruta perdidas en el proceso.
Este ya no es el caso con la nueva extensión lanzada hoy.
Dado que el número original tiene más de dos años, me gustaría cerrarlo.
Presente un nuevo problema si aún existe un comportamiento similar en la nueva extensión.
¡Muchos gracias!

Este problema se ha bloqueado automáticamente debido a la inactividad.
Por favor, presente un nuevo problema si se encuentra con un problema similar o relacionado.

Obtenga más información sobre nuestra política de bloqueo automático de conversaciones .

_Esta acción ha sido realizada automáticamente por un bot._

¿Fue útil esta página
0 / 5 - 0 calificaciones