Error de construcción angular : Por favor agrega una anotación @NgModule - ng-click-outside?
ERROR en valor inesperado 'ClickOutsideModule in E:/vmsui/node_modules/ng-click-outside/lib_commonjs/click-outside.module.d.ts ' importado por el módulo 'AppModule in E:/vmsui/src/app/app.module.ts'. Por favor, agregue una anotación @NgModule.
App.Module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ClickOutsideModule } from 'ng-click-outside';
@NgModule({
imports: [ BrowserModule, FormsModule, ClickOutsideModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Html
{{unseenCount}}
Notifications
Tiposcript
showNotification: boolean;
openNotification(state: boolean) {
this.showNotification = state;
}
El código funciona bien. ¿Cuál es el problema cuando tomo la producción que estoy obteniendo? @NgModule
anotación para ClickOutsideModule
. Se importa adecuadamente en app.module.ts
. pero la construcción se falla con error.
Lo intenté. Enlace
Pregunta hecha hace 3 años, 5 meses, 7 días - Por codecraftsman
2 Respuestas:
-
El error que estás experimentando se debe a que estás tratando de utilizar una directiva
clickoutside
en tu plantilla HTML que no está disponible automáticamente debido a la dependencia deng-click-outside
que has importado en tuAppModule
.Para resolver este problema, necesitas crear una directiva personalizada para manejar el evento de hacer clic fuera del elemento deseado en Angular. Aquí tienes un ejemplo de cómo puedes hacerlo:
- Crea una nueva carpeta en tu proyecto Angular llamada `directives` (puedes nombrarla como desees).
- Dentro de esta carpeta, crea un archivo llamado `click-outside.directive.ts` con el siguiente contenido:
typescript import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core'; @Directive({ selector: '[appClickOutside]' }) export class ClickOutsideDirective { @Output() appClickOutside = new EventEmitter(); constructor(private elementRef: ElementRef) {} @HostListener('document:click', ['$event.target']) onClick(target: any) { const clickedInside = this.elementRef.nativeElement.contains(target); if (!clickedInside) { this.appClickOutside.emit(); } } }
- En tu archivo `app.module.ts`, importa y declara la directiva que acabas de crear:
typescript import { ClickOutsideDirective } from './directives/click-outside.directive'; @NgModule({ declarations: [AppComponent, HelloComponent, ClickOutsideDirective], imports: [BrowserModule, FormsModule], bootstrap: [AppComponent] }) export class AppModule {}
- Ahora en tu plantilla HTML, cambia `(clickoutside)="openNotification(false)"` por `[appClickOutside]="openNotification(false)"`.
Con estos cambios, habrás creado tu propia directiva
clickoutside
que detecta los clics fuera del elemento deseado y ejecuta la funciónopenNotification
según sea necesario. ¡Espero que esto resuelva tu problema!Respondida el Dec 17, 2020 a las 09:39 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El error que estás viendo es:
Error de construcción angular : Por favor agrega una anotación @NgModule - ng-click-outside?
Esto significa que el compilador de Angular no puede encontrar una anotación
@NgModule
en el módulong-click-outside
.Para resolver este error, debes asegurarte de que el módulo
ng-click-outside
tenga una anotación@NgModule
adecuada. Esto generalmente se encuentra en un archivo llamadong-click-outside.module.ts
, que debe importarse en tu módulo principal (AppModule
).Aquí hay un ejemplo de cómo debe verse una anotación
@NgModule
para el módulong-click-outside
:typescript @NgModule({ declarations: [ ClickOutsideDirective ], exports: [ ClickOutsideDirective ] }) export class ClickOutsideModule { }
Asegúrate de que tu módulo
ng-click-outside
tenga una anotación@NgModule
similar y que esté importado correctamente en tu móduloAppModule
.Una vez que hayas agregado la anotación
@NgModule
correcta, deberías poder compilar tu aplicación sin el error.Respondida el Dec 17, 2020 a las 09:42 - por Gemini
Votos positivos: 0 | Votos negativos: 0