NullInjectorError: No provider for ElementRef!

[theunreal]

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?

[alan-albuquerque]

same here, any solution?

[izifortune]

Can you please post your index.ts or the file containing your @NgModule

[theunreal]

@izifortune This is the same file created using the cli, no changes

[robertbrower-technologies]

As a quick test I simply renamed my directive selector to bsRotate and added it to the component markup. I did not get the error. I got other errors though. I had to restart the playground a few times. I verified the directive was applied.

[AlanAlbuquerque]

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

[AchiraFernando]

Got it working by adding...

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

to defaults in .angular-cli.json file

[guybi]

Thanks @AchiraFernando, it's working!

[nathansomething]

I tried @AchiraFernando's solution and still getting the same error. I'm using Angular 5.2. Any suggestions?

[rtm]

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.

[Dmonika04]

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?

[swapnil-coditas]

Same issue with angular 7

[MetaiR]

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

[suneric1]

Got it working by adding...

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

to defaults in .angular-cli.json file

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

[AshwaniChoudhary]

"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.

[dmitry-grinko]

Instead of using ElementRef we can use:

import { DOCUMENT } from '@angular/common';
constructor( @Inject(DOCUMENT) private doc ) {}
let [link]: HTMLLinkElement[] = this.doc.querySelectorAll(`[rel="canonical"]`);

[juanmendes]

Instead of using ElementRef we can use:

import { DOCUMENT } from '@angular/common';
constructor( @Inject(DOCUMENT) private doc ) {}
let [link]: HTMLLinkElement[] = this.doc.querySelectorAll(`[rel="canonical"]`);

But that assumes you only have a single instance of your component?

[callmeaponte]

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.