generator-angular2-library: NullInjectorError: No provider for ElementRef!

When I’m simply trying to put el: ElementRef in my directive constructor and use it in my component, I get the following error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[SampleDirective -> ElementRef]: 
  StaticInjectorError(Platform: core)[SampleDirective -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(AppModule)[SampleDirective -> ElementRef]: 
  StaticInjectorError(Platform: core)[SampleDirective -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

component:

template: `<div><h1 class="rotateBox" bsRotate>Test</h1></div>`,

directive:

@Directive({
  selector: '[bsRotate]'
})
export class SampleDirective {

  constructor(el: ElementRef) {
    console.log(el);
  }

}

Why i’m unable to use the element reference in my directive when generating a library?

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 4
Comments: 17

Most upvoted comments

Same issue with angular 7

+19

swapnil-coditas on Feb 5, 2019

The paths option in tsconfig.json worked for me, after futzing around for hours.

"paths": {
  "@angular/*": ["../node_modules/@angular/*"]
}

Adding --preserve-symlinks to the build command, on the other hand, did not work for me.

+13

rtm on Jun 6, 2018

I had the same problem and I removed node_module folder and yarn.lock (or package-lock.json in case u are using npm) and installed dependencies again, now my problem is solved, hope it’s helpful

installing dependencies by:

yarn install # or npm install

+10

MetaiR on Jun 2, 2019

I tired both the above solution, but no success. I am facing following error: ERROR { Error: StaticInjectorError(AppServerModule)[NgClass -> ElementRef]: StaticInjectorError(Platform: core)[NgClass -> ElementRef]: NullInjectorError: No provider for ElementRef! at NullInjector.module.exports.NullInjector.get ngTempTokenPath: null, ngTokenPath: [ 'NgClass', [Function: ElementRef] ] } Also, i have upgraded my application from angular5 to angular 6 and trying to implement server-side rendering. Any solution?

Dmonika04 on Oct 3, 2018

Thanks @AchiraFernando, it’s working!

guybi on Apr 4, 2018

Got it working by adding…

    "build": {
      "preserveSymlinks": true
    },

to defaults in .angular-cli.json file

AchiraFernando on Apr 3, 2018

I’m seeing the same issue with Angular 8:

CardComponent.html:13 ERROR NullInjectorError: StaticInjectorError(AppModule)[LinkDirective -> ElementRef]: 
  StaticInjectorError(Platform: core)[LinkDirective -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

I’ve tried the following:

Deleting node_modules and package-lock.json and running npm install again.
Adding "preserveSymlinks": true to build.options in my angular.json file.
Updating the paths property in tsconfig.json with "@angular/*": ["../node_modules/@angular/*"].
Publishing my changes and loading my library from the npm library, instead of loading it locally.

… None of this worked. I can only get my attribute directive to work if I host it inside my project instead of attempting to load it as a third-party library.

I’ve even tried copying and pasting the attribute directive from the Angular docs as-is, without modifications, and the error still occurs.

I suspect this might be an issue with Angular itself, where attempting to load and use attribute directives from libraries simply doesn’t work.

callmeaponte on May 22, 2020

"paths": {
    "@angular/*": [
        "./node_modules/@angular/*"
    ]
}

Make the paths mapping in the application’s tsconfig (where you are linking to the library) and not the library one.

AshwaniChoudhary on Dec 19, 2019

Got it working by adding…
    "build": {
      "preserveSymlinks": true
    },
to defaults in .angular-cli.json file

I think "preserveSymlinks": true should be in build.options

suneric1 on Dec 11, 2019

It’s relationed to install the library from local dir directly, when I publish the library to NPM and install from npm servers, works perfect

AlanAlbuquerque on Mar 3, 2018