1

I created angular library (named ng-library) by following https://angular.io/guide/creating-libraries.

  • Built it usin ng build ng-library
  • Made it available to other angular applications using yarn link
  • Created an angular application and linked the library using yarn link ng-library

I could use the components and services inside the module. Everything fine!

Now I added a new angular component in ng-library which is using ElementRef.

import { Component, NgZone, Input, Output, forwardRef } from '@angular/core';
import { ChangeDetectionStrategy, ElementRef, EventEmitter } from '@angular/core';
@Component({
  selector: 'new-component',
  template: '<ng-content></ng-content>'
})
export class NewComponent {
  protected el: HTMLElement;

  constructor(r: ElementRef, protected z: NgZone) {
    this.el = r.nativeElement;
  }
}

I tried using this component in angular application created. I am getting below error.

AppComponent.html:1 ERROR NullInjectorError: StaticInjectorError(AppModule)[NewComponent-> ElementRef]: 
  StaticInjectorError(Platform: core)[NewComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at NullInjector.get (http://localhost:4200/vendor.js:36417:27)
    at resolveToken (http://localhost:4200/vendor.js:51335:24)
    at tryResolveToken (http://localhost:4200/vendor.js:51261:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:51111:20)
    at resolveToken (http://localhost:4200/vendor.js:51335:24)
    at tryResolveToken (http://localhost:4200/vendor.js:51261:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:51111:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:62298:29)
    at NgModuleRef_.get (http://localhost:4200/vendor.js:63364:16)
    at resolveDep (http://localhost:4200/vendor.js:63895:45)

This is how I added the module in my Angular application.

import { NgLibraryModule } from "ng-library";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NgLibraryModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Error says provider for ElementRef not available. How can I make ElementRef available in the NgModule which is inside an Angular Library?

Thanks Basanth

Bachu
  • 425
  • 4
  • 13

1 Answers1

0

You need to use ElementRef with the @ViewChild decorator: Example : @ViewChild('idOfTheDiv/ButtonAsInYourHTML',{ static: true }) private idOfTheDiv/Button:ElementRef;

You can read more here https://alligator.io/angular/viewchild-access-component/

Anirudh AV
  • 26
  • 3
  • link is not working try this one https://www.digitalocean.com/community/tutorials/angular-viewchild-access-component – Jules Jul 15 '22 at 08:45