'Components in library do not work with ngIf/ngFor

I have an app I am trying to upgrade to angular 5 and library-tize. I setup ng-packagr so the lib is built and bundled, this is no problem until I try to use one of the components with ngIf or ngFor which give me the error

HeaderComponent.html:13 ERROR Error: StaticInjectorError[ViewContainerRef]: 
  StaticInjectorError[ViewContainerRef]: 
    NullInjectorError: No provider for ViewContainerRef!
    at _NullInjector.get (core.js:993)

at runtime. I have looked around and tried some different things but nothing seems to fix it...

Here is relevant module code for the library.

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    RouterModule,

    /* Bootstrap Imports */
    AccordionModule, 
    AlertModule, 
    ButtonsModule, 
    CarouselModule, 
    CollapseModule, 
    BsDropdownModule, 
    ModalModule, 
    PaginationModule, 
    ProgressbarModule, 
    RatingModule, 
    TabsModule, 
    TimepickerModule, 
    TooltipModule, 
    TypeaheadModule, 
    DatepickerModule,

    ServicesModule,
],
declarations: [
    LayoutComponent,
    HeaderComponent,
    FooterComponent,
    OffsidebarComponent,
    SidebarComponent,
    UserblockComponent,
    OverlayComponent,
    BusyIndicatorComponent
],
exports: [
    LayoutComponent
],
providers: [
    UserblockService
]
})
export class ComponentsModule {}

Here is the HTML where the error is reported.

          <a class="hidden-xs" trigger-resize="" (click)="toggleCollapsedSideabar()" *ngIf="!isCollapsedText()">
            <i class="material-icons">menu</i>
          </a>

angular

Solution 1:^[1]

You should add BrowserModule to your imports array.

@NgModule({
imports: [
    BrowserModule, <----- add this
    CommonModule,
    FormsModule,
    RouterModule,

More info here.

Solution 2:^[2]

Removing the dependencies from library's package.json before adding the library to the main app was the fix for me.

Solution 3:^[3]

Add the preserveSymlinks flag in the angular.json from your consuming App.

{"projects": {
    "MyApp": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true, // <-----
[...]

And import the CommonModule in your Component Libary

Solution 4:^[4]

I've finally got my setup working by doing this:

Having npm link setup properly ('npm link' in the library's dist folder and then 'npm link libname' in the main app's folder).

Having preserveSymlinks set to true in the angular.json of the app that's consuming the library as @Michael R. mentioned



{"projects": {
            "MyApp": {
              "architect": {
                "build": {
                  "options": {
                    "preserveSymlinks": true, // <-----
        [...]

3. Making sure i also had preserveSymlinks set to true in my library's tsconfig.lib.json



"angularCompilerOptions": {
                    "preserveSymlinks": true,, // <-----
        [...]

Recompiling the lib (with ng build) and recompiling the main app (on ng serve) had it working after this, also BrowserModule is supposed to be used in applicatins, use CommonModule inside libraries

Solution 5:^[5]

You can't use NgIf without importing CommonModule

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	U?ur Dinç
Solution 2	Morteza Jalambadani
Solution 3	Michael R.
Solution 4	Fred
Solution 5	Reza Younesi

'Components in library do not work with ngIf/ngFor

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]