Angular Library with Ionic Components: NullInjectorError: No provider for ChangeDetectorRef!

@cclausen wrote:

I’ve setup an angular library project and trying to include some components in it that have ionic components in them.

Everything works fine, until I try to use an Ionic component in them. This is with Ionic 5.

The problematic component:

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

@Component({
  selector: 'pct-ng-usersystem',
  template: `
    <p>
      ng-usersystem works!!!???
    </p>
    <ion-button>BTT</ion-button>
  `,
  styles: []
})
export class NgUsersystemComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
 

Notice how it tries to use an ion-button.

The module exported by the library:

@NgModule({
  declarations: [NgUsersystemComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [NgUsersystemComponent]
})
export class NgUsersystemModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: NgUsersystemModule,
      providers: [
        NgUsersystemService
      ]
    }
  }
}

As you can see I am importing IonicModule here and I am tried to fix the problem by importing Angulars CommonModule.
However when I tried to use this Component in an Ionic-Project I get an error:
NullInjectorError: StaticInjectorError(AppModule)[IonButton -> ChangeDetectorRef].

I don’t understand what I am supposed to do, google can’t even find who is normally supposed to provide the ChangeDetectorRef, it seems normally that just falls from the sky and for some reason now it isn’t.

Posts: 1

Participants: 1

Read full topic