El problema
Mis archivos html advierten que mis componentes/tuberías personalizados 'no son un elemento conocido'. Sin embargo, la creación y ejecución de la aplicación funciona según lo previsto , y los componentes/tuberías personalizados son funcionales. La dicotomía de los componentes que funcionan pero se muestran como errores es molesta y puede ser difícil trabajar con ellos. Sé que esto es algo pequeño, pero realmente quiero no ver errores en mis archivos html cuando no hay errores.
Resumen
Tengo dos proyectos angulares distintos; una biblioteca angular que consumo con mi aplicación angular. La biblioteca exporta varios componentes, tuberías y servicios personalizados que utiliza la aplicación. No tengo esta biblioteca publicada a través de npm, sino que uso npm-link para dar acceso a la aplicación a la biblioteca. Esto parece funcionar como cualquier servicio/componente definido en los componentes de mi aplicación y no se queja. Aunque en el momento en que coloco algo en mi archivo de plantilla de mi biblioteca, ese selector está subrayado y aparece una advertencia.
Los archivos
/*Library Module*/ @NgModule({ declarations: [ ThemeToggleComponent, // Other custom components/pipes ], exports: [ ThemeToggleComponent, // Other components needed in templates files ] }) export class MyCommonModule {}
/* * Public API Surface of my-common library */ export * from './lib/my-common.module'; /* * Many other components, services, pipes, etc etc */ export * from './lib/theme-toggle/theme-toggle.component';
/* Consuming Application module */ import { MyCommonModule } from 'my-common'; @NgModule({ imports: [ MyCommonModule, ], declarations: [ MyComponent, ], }) export class MyModule {}
/* Template of MyComponent, my.component.html */ <div> <my-theme-toggle (darkThemeSelected)="toggleTheme($event)"></my-theme-toggle> </div>
El archivo anterior tendrá todas las líneas que hacen referencia a mis componentes personalizados subrayados en rojo con el mensaje de error 'my-theme-toggle' no es un elemento conocido: ...si lo es, verifique que sea parte del módulo .
Intentos de arreglar
He intentado algunas cosas, pero fue en vano
mis corazonadas
Creo que este es un problema con la opción del compilador de rutas en tsconfig.json en la aplicación de consumo. A lo largo de toda mi investigación, esto es lo único que aparece más que cualquier otra cosa. Actualmente no tengo una ruta establecida, porque todo está funcionando. Mi biblioteca común se ve y actúa como cualquier otra biblioteca de node_module, aparte de este problema.
Mi otro pensamiento es que debido a que todo funciona y se ejecuta, entonces el problema puede ser que vs-code no comprenda la importación, o algo por el estilo. Aunque creo que esto es poco probable.
El fondo
Ambos proyectos angulares están en la versión 9, rc7. Uso ng-packagr para construir mi biblioteca. Uso el código de Visual Studio y, en el momento de escribir este artículo, estoy en la última versión.
EDITAR Este problema desapareció al actualizar a angular 11, creo que varios de los otros problemas podrían resolverlo, pero esta se siente como la mejor opción.
Cambié mis proyectos de Angular 8 a 9 y tuve el mismo problema en VS Code. Mi solución que funcionó para mí:
ng build my-lib --prod
=> Esto obligará al compilador a usar el View Engine anterior en lugar de Ivy ( bibliotecas de documentos angulares )npm pack
en lugar de npm link
=> esto creará un archivo tgz, que puede instalar en su aplicación de consumo.npm install "D:/mypath/dist/my-lib/my-lib-2.1.0.tgz"
Esto resuelve en mi entorno el problema de VS Code con Angular 9.
Nunca tuve ese error descrito hasta hace poco.
Después de desinstalar la extensión Angular Language Service (que había instalado recientemente), el error desapareció.
Para solucionar el problema, actualmente debe compilar con la marca de producción --prod
porque, en su estado actual, Angular Language Server no funciona con las compilaciones de Ivy . De forma predeterminada, la compilación angular prod se compila sin Ivy. Por lo tanto, cuando se compila, crea un archivo lib.metadata.json
. Este es el archivo que utiliza el servidor de idiomas para que el complemento funcione.
ng build <lib> --prod
--watch
para ver los cambioscd dist
luego npm link
package.json
en la carpeta dist
y creé el enlace allí ya que mi lib tiene varios módulos. Esto le permitirá hacerimport { ModuleAComponent } from '<lib>/moduleA'
import { ModuleADirective } from '<lib>/moduleA'
package.json
de lo contrario, utilizará la raíz del proyecto, ya que es el package.json
más cercano."lib": ["./node_modules/lib", "./node_modules/lib/*"]
npm link <lib>
path
en su tsconfig.base.json
(la ruta puede ser diferente según cómo haya creado su enlace) { "compilerOptions": { "paths": { "lib/*": [ "./node_modules/lib/*" ] } } }
Tengo exactamente el mismo problema. Aquí hay una solución,
agregando
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
y
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
a tu modulo
Un app.module.ts
completo para su referencia
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NgNiceSelectModule } from 'ng-nice-select'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, NgNiceSelectModule ], providers: [], bootstrap: [AppComponent], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class AppModule { }
He visto esta pregunta publicada de formas ligeramente diferentes en diferentes sitios, dentro y fuera de Stack Overflow. Puedo decirle que probablemente no sea un problema con Angular Language Service.
cómo ha exportado el Componente faltante de la biblioteca, por ejemplo, verifique si:
export * from <your-component>
a su archivo public-api.ts
exports
del Módulo de Biblioteca que lo exportacómo está importando el componente de biblioteca, por ejemplo, verifique si:
cd /path/to/<your-library> && npm link
cd /path/to/app && npm link <your-library>
YourLibraryModule
a imports:[]
de su NgModule principal de aplicaciones¡Tal vez olvidó declarar el componente principal en su aplicación NgModule!
declarations
que hacen referencia al Componente de la biblioteca que falta, y el compilador/servicio de lenguaje se quejará de que falta el Componente de la biblioteca, ¡pero sin mencionar que el Componente de la aplicación se exportó incorrectamente!A veces, el error puede cambiar una vez que reinicie el servicio de idioma (por ejemplo, reinicie VSCode). Para el escenario 3 que mencioné anteriormente, el error se convierte en:
Error: Cannot determine the module for class YourAppComponent in YourApp/src/app/components/your-app-component/your-app-component.component.ts! Add YourAppComponent to the NgModule to fix it
¡¡Y voilá!! ¡Usted ve el verdadero problema y arreglarlo es fácil!
Puede probar el siguiente enfoque. https://github.com/angular/vscode-ng-language-service/issues/645#issuecomment-648283157 En pocas palabras:
dist/YourLibName
y ejecute npm link
npm link YourLibName
nombre del paquete lib.json { "compilerOptions": { . . . "paths": { "YourLibName from lib package.json": ["node_modules/YourLibPath"] },
Entonces podrá usarlo como cualquier biblioteca, por ejemplo, material.
Hola, tuve el mismo problema al desarrollar una biblioteca personalizada. Estaba usando el enlace entre la aplicación y la lib.
Arreglé la adición de preserveSymlinks en compilerOptions dentro de tsconfig.json.
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "preserveSymlinks": true, ...
Consulte aquí para obtener más detalles.