Components in library do not work with ngIf/ngFor

Question

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>

I've had this problem in the past and resolved it by: https://github.com/angular/angular-cli/issues/11454 Hope it helps! — Web Dev, Nov 21 '18 at 03:22

score 5 · Answer 1 · answered Jan 04 '18 at 22:51

5

You should add BrowserModule to your imports array.

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

More info here.

answered Jan 04 '18 at 22:51

Uğur Dinç

2,415
1
18
25

3

When I try to add browser it gives me an error that the injector cannot find ngzone now... I thought common exported ngif and ngfor aswell – comwizz2 Jan 05 '18 at 05:48
Still useful for Angular 13 – Alan Telles Jan 12 '22 at 14:59

score 2 · Answer 2 · edited Feb 28 '19 at 00:19

2

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

edited Feb 28 '19 at 00:19

Morteza Jalambadani

2,190
6
21
35

answered Feb 27 '19 at 20:04

Kyle Conkright

21
2

Can you describe this more precisely, what you did? You deleted everything from the library's package.json and then added the library to your main app's npm-package? – Steven X Aug 06 '19 at 15:25
Yeah, exactly what you said. Remove all the dependencies from your library's `package.json` file that you don't need in the consuming app. For example, I only have one and it's slider library. You don't need anything that the consuming app already has, i.e. the angular packages. – Kyle Conkright Aug 07 '19 at 17:31

score 0 · Answer 3 · answered Jul 09 '19 at 09:26

0

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

answered Jul 09 '19 at 09:26

Michael R.

388
3
9

1

This now results in `NullInjectorError: No provider for NgZone!` – Hlawuleka MAS Oct 09 '19 at 11:40

score 0 · Answer 4 · answered Oct 14 '19 at 06:10

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

score 0 · Answer 5 · answered Apr 14 '22 at 13:55

0

You can't use NgIf without importing CommonModule

answered Apr 14 '22 at 13:55

Reza Younesi

1
2

Components in library do not work with ngIf/ngFor

5 Answers5