3

I have created a components library using angular cli ng generate library, with a component that uses *ngIf inside a module.

After successfully build and install the library in my main project, when I try to use the component I am getting No provider for ViewContainerRef error.

Versions:

@angular/cli version: "~7.0.6",

@angular/* version : "~7.0.0"

Error:

ERROR Error: StaticInjectorError(AppModule)[NgIf -> ViewContainerRef]: StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]: NullInjectorError: No provider for ViewContainerRef!

component:

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'al-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {

  @Input() header: string;
  @Input() text: string;

  constructor() { }

  ngOnInit() {
  }

}

template:

<div *ngIf="header">

</div>

module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardComponent } from './card.component';

@NgModule({
  declarations: [CardComponent],
  imports: [
    CommonModule
  ],
  exports: [CardComponent],
})
export class CardModule { }
itay oded
  • 978
  • 13
  • 22
  • It comes from `CommonModule`, be sure to import it correctly. –  Dec 18 '18 at 13:22
  • thanks for the quick response, I am importing the `CommonModule`. – itay oded Dec 18 '18 at 13:24
  • be sure that you're importing the `CommonModule` into the same Module that you declare the component. – 3xGuy Dec 18 '18 at 13:24
  • this is my module: @NgModule({ declarations: [CardComponent], imports: [ CommonModule ], exports: [CardComponent], }) export class CardModule { } – itay oded Dec 18 '18 at 13:25
  • are you using `ViewContainerRef` in the Component, or trying to use it in a Service? – 3xGuy Dec 18 '18 at 13:25
  • can you please post your constructor? for `CardComponent` – 3xGuy Dec 18 '18 at 13:27
  • I am just using a component with `*ngIF` and then try to use this component after build in my main project – itay oded Dec 18 '18 at 13:27
  • please note that I am using an external library, building and publishing it, and then try to use a simple component from the library that causes this error. – itay oded Dec 18 '18 at 13:38

1 Answers1

9

I have found out the problem, it solved by adding "preserveSymlinks": true to my main project's angular.json file.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
             ...

this is where I have found the solution: https://github.com/angular/angular-cli/issues/10896

itay oded
  • 978
  • 13
  • 22