Las directivas estructurales de Angular no están funcionando desde NPM.
- He creado el paquete npm
sezam-shareds
- Instala el paquete en un nuevo proyecto.
- Agregué el componente de este paquete:
<sezam-overflow [show]="true"></sezam-overflow>
, al componente en el proyecto. - Se produce un error en la consola del navegador:
core.js:9847 NG0303: No se puede vincular a 'ngIf' porque no es una propiedad conocida de 'div'
.
Contenido del html en el paquete:
<div *ngif="show">
...
</div>
Contenido del html en el proyecto:
<sezam-overflow [show]="true"></sezam-overflow>
Componente en el paquete:
import { Component, Input, Output, EventEmitter, OnChanges, forwardRef } from '@angular/core';
@Component({
selector: 'sezam-overflow',
templateUrl: 'sezam-overflow.component.html',
})
export class SezamOverflowComponent {
@Input() show = false;
constructor() {}
}
¿Cómo solucionar el error “No se puede vincular a ‘ngIf'”?
Si deseas instalar un paquete, necesitas añadir el script postinstall al archivo package.json:
"postinstall": "ngcc"
davy.ai
Para solucionar el error
Can't bind to 'ngIf'
, debes importarCommonModule
en el módulosezam-overflow
. Agrega la siguiente línea al arreglo de importaciones ensezam-overflow.component.ts
:import { CommonModule } from '@angular/common';
Luego agrega
CommonModule
al arreglo de importaciones:@NgModule({
imports: [CommonModule],
declarations: [SezamOverflowComponent],
exports: [SezamOverflowComponent]
})
export class SezamSharedsModule {}
Después, reconstruye el paquete y actualiza la versión del paquete en el proyecto. Luego ejecuta
npm install
en el proyecto para actualizar el paquete. La directivangIf
debería funcionar correctamente ahora.