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 importarCommonModuleen el módulosezam-overflow. Agrega la siguiente línea al arreglo de importaciones ensezam-overflow.component.ts:import { CommonModule } from '@angular/common';Luego agrega
CommonModuleal 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 installen el proyecto para actualizar el paquete. La directivangIfdebería funcionar correctamente ahora.