Angular 结构指令在 NPM 中不起作用

Question

1. I've created npm package sezam-shareds
2. Install package to new Project
3. Added component from this package: <sezam-overflow [show]="true"></sezam-overflow> to component in project
4. An error occurs in browser console: core.js:9847 NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'

Content of html in package:

<div *ngIf="show">
...
</div>

Content of html in project:

<sezam-overflow [show]="true"></sezam-overflow>

Component in package:

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() {}
}

How fix error? Can't bind to 'ngIf'

If you would like to install a package, you need to add postintall script to package.json: "postinstall": "ngcc"

Answer 1

this error is not related to the component. just add the below code to your module

import { CommonModule } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser';

your final code like this

 @NgModule({
    imports: [CommonModule,BrowserModule ],
    declarations: [SezamOverflowComponent]
})
class AppModule {}

Answer 2

4 things to check:

1. What module declares the SezamOverflowComponent ?
2. Does this modules exports contain the SezamOverflowComponent ? (I'll just assume you called this SezamOverflowModule ...)
3. What component are you using the <sezam-overflow> on? What module declares this component? (Assume XxMidule...)
4. This XxMidule should import the SezamOverflowModule