Vscode-ng-language-service: Componentes de módulos reexportados não detectados pelo serviço de linguagem em modelos HTML

Criado em 11 abr. 2017  ·  22Comentários  ·  Fonte: angular/vscode-ng-language-service

Uma vez que angular / material2-2.0.0-beta.3 anunciou que MaterialModule que exportou todos os componentes de material ficará obsoleto na próxima versão, decidi seguir seus conselhos e criar meu próprio aplicativo específico AppMaterialModule onde incluí apenas os módulos de materiais que utilizo um por um.

// 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 { }

Aqui está meu arquivo app.module.ts também:

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

Testei meu aplicativo e ele funciona da mesma maneira que funcionava antes de substituir o MaterialModule . No entanto, quando abri um arquivo de modelo HTML, percebi que há erros mostrados em todos os componentes materiais usados.

Todos eles estão com o mesmo erro:

[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 seja uma explicação útil para o problema que estou enfrentando. Se precisar de mais informações, terei o maior prazer em fornecê-las.

bug

Comentários muito úteis

Acho que o serviço de idioma não aplica corretamente o tsconfig compilerOptions. Eu tenho um mapeamento de caminho lá e os módulos importados usando esse mapeamento não são reconhecidos, o que para mim resulta no mesmo problema descrito aqui.

@chuckjaz : reproduzi o problema aqui: https://github.com/mjamin/vscode-ng-language-service-repro

O tsconfig.json define um mapeamento de caminho que é usado em app.module.ts para importar o BarModule . O componente declarado nesse módulo não é reconhecido pelo serviço de linguagem em app.component.html

Todos 22 comentários

Você pode me enviar um link para um repositório que reproduza esse problema ou anexar um arquivo .zip que eu possa descompactar que demonstre isso?

Verificando que encontrei esse problema exato no VSCode, seguindo a mesma recomendação (criar e módulo de material específico do aplicativo) como @ tsvetan-ganev.

@chuckjaz , aqui está um projeto compactado que baixei do plnkr porque não consegui descobrir como compartilhar o link do projeto real lá. Desculpe pelo transtorno, mas literalmente passei 20 minutos tentando compartilhar um link para meu projeto.
ng-material.zip

@ tsvetan-ganev Não consegui reproduzir o problema que você está enfrentando com o arquivo .zip fornecido porque ele não contém um projeto completo. Você pode incluir um que tenha arquivos package.json e tsconfig.json válidos?

Eu encontrei o que pode ser um bug relacionado, https://github.com/angular/angular/issues/15969. Isso ocorreu porque @angular/animations não foi instalado junto com @angular/material .

Acho que o serviço de idioma não aplica corretamente o tsconfig compilerOptions. Eu tenho um mapeamento de caminho lá e os módulos importados usando esse mapeamento não são reconhecidos, o que para mim resulta no mesmo problema descrito aqui.

@chuckjaz : reproduzi o problema aqui: https://github.com/mjamin/vscode-ng-language-service-repro

O tsconfig.json define um mapeamento de caminho que é usado em app.module.ts para importar o BarModule . O componente declarado nesse módulo não é reconhecido pelo serviço de linguagem em app.component.html

@mjamin , você já tem alguma correção?

Também estou tendo esse problema. Parece ocorrer sempre que há módulos compartilhados que você importa para cada componente também. Parece que o serviço ignora as definições fornecidas pelos módulos importados que são reexportados. Eu fiz um módulo compartilhado que reexporta itens que ele importa e declara (incluindo CommonModule, um módulo em questão), e quando eu importo este módulo para outros módulos, Angular (4) entende as importações, mas o Angular Language Service não consegue encontrar CommonModule ou meu componente personalizado, embora sejam exportados em meu módulo compartilhado.

@chuckjaz @mjamin Fiz uma reprodução diferente do problema e descobri que mais se aproxima (acho) da descrição https://github.com/Nerketur/shared-ng-module-test

Não parece ter nada a ver com as opções do compilador, já que todo o projeto usa tudo padrão.

Quando você disse que o ALS não consegue encontrar o CommonModule / seu componente personalizado, quer dizer que o preenchimento automático do ALS não funciona quando você tenta usar o CommonModule / componente personalizado?

O preenchimento automático não funciona e aparecem linhas de erro vermelhas com o erro:
"[Angular]
'app-testing' não é um elemento conhecido:

  1. Se 'app-testing' for um componente Angular, verifique se ele faz parte deste módulo.
  2. Se 'app-testing' for um componente da Web, adicione 'CUSTOM_ELEMENTS_SCHEMA' em '@ NgModule.schemas' deste componente para suprimir esta mensagem. "

(usando o repo que acabei de fornecer)

Estou no processo de conversão deste projeto para usar a nova arquitetura de plug-in de texto digitado e tenho demorado a detectar esses bugs. Me desculpe por isso.

Passarei pelo backlog assim que tivermos a arquitetura do plugin classificada.

@chuckjaz não se preocupe. Grato por você estar colocando tanto esforço nisso. Está chegando lá;)

Existe uma solução alternativa para isso?

Também tendo esse problema. Gostaria de saber se há alguma atualização, pois adoraria continuar usando este plugin.

Acho que isso resolve o problema: https://github.com/angular/vscode-ng-language-service/issues/108

Apenas use caminhos relativos ao importar tudo, incluindo módulos compartilhados, e importações para os próprios módulos compartilhados, ou seja, todas as importações devem ter caminhos relativos. E então as reexportações serão reconhecidas.

@ tx8821 funcionou, obrigado. Bom o suficiente por agora! Estou feliz por poder usá-lo novamente, de longe o melhor recurso da v4!

@ tx8821 obrigado pela solução! Mas isso não é um conserto, é apenas mais uma muleta no código. Esperará por uma verdadeira correção

Tendo o mesmo problema, adoraria ver uma solução em relação ao uso de caminhos relativos (ugh!). Obrigado pelo seu árduo trabalho até agora! :)

Ionic 4 multi-app (monorepo) me trouxe aqui.
Infelizmente, o Ionic requer um package.json para cada aplicativo. Em outras palavras: tenho 3 projetos em um. 2 aplicativos e a raiz. Todo pacote json é mais ou menos igual. Enfim ... esta é a estrutura do meu espaço de trabalho (snippet):

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 um aplicativo:

{
  "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
  }
}

Posso importar o HelloWorldComponent da lib.
Mas em html recebo o erro:

'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

O Angular-Language-Service deve funcionar porque HelloWorldComponent é declarado em app.module.ts. Esquisito. Talvez seja porque a pasta está fora do app src? O caminho do alias @lib é apenas um atalho. Eu também tentei sem e importação direta do componente. Ainda erro.

Talvez este seja um novo problema?

Costumávamos implementar lógica customizada para descobrir e analisar tsconfig.json e mapeamentos de caminho perdidos no processo.
Este não é mais o caso com a nova extensão lançada hoje.
Como a edição original tem mais de dois anos, gostaria de fechá-la.
Registre um novo problema se um comportamento semelhante ainda existir na nova extensão.
Muito obrigado!

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_Esta ação foi executada automaticamente por um bot._

Esta página foi útil?
0 / 5 - 0 avaliações