Angular 2 Release "Unexpected value 'ElementRef' imported by the module"

Question

I upgraded to the release of Angular 2 and I am trying to use ElementRef. At first, I got the error Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef as specified here: Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef so I changed my code to:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ElementRef }       from '@angular/core';
@NgModule({
    declarations: [DashboardComponent, WidgetBankComponent, DataTableDirectives, OrderBy],
    exports: [DashboardComponent, WidgetBankComponent],
    imports: [BrowserModule, HttpModule, FormsModule, ChartsModule, ElementRef],
    providers: [ChartService, GridService, WidgetsControlService, GridViewService, ApplicationSettingsService, DataService, ToolsService, LocalStorageService, RuntimeCompiler, COMPILER_PROVIDERS, NgGrid, NgGridItem],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

and now I am getting the error (SystemJS) Unexpected value 'ElementRef' imported by the module 'DashboardModule'

any ideas?

Thank you in advance!

EDIT

Did the suggested fix in the answer below and now have this error - here is the full error - is there a way to tell where i need to supply the provider from this error?

zone.js:355 Unhandled Promise rejection: No provider for ElementRef! ; Zone: <root> ; Task: Promise.then ; Value: NoProviderError {_nativeError: Error: No provider for ElementRef!
    at NoProviderError.Error (native)
    at NoProviderError.Base…, keys: Array[1], injectors: Array[1]}_nativeError: Error: No provider for ElementRef!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1248:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1703:20)
    at new NoProviderError (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1734:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3331:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3359:29)
    at ReflectiveInjector_._getByKey (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3322:29)
    at ReflectiveInjector_.get (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3131:25)
    at NgModuleInjector.AppModuleInjector.createInternal (AppModule.ngfactory.js:310:75)
    at NgModuleInjector.create (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:7192:80)constructResolvingMessage: (keys)injectors: Array[1]keys: Array[1]message: (...)name: (...)stack: (...)__proto__: AbstractProviderError Error: No provider for ElementRef!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1248:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1703:20)
    at new NoProviderError (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:1734:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3331:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3359:29)
    at ReflectiveInjector_._getByKey (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3322:29)
    at ReflectiveInjector_.get (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:3131:25)
    at NgModuleInjector.AppModuleInjector.createInternal (AppModule.ngfactory.js:310:75)
    at NgModuleInjector.create (http://localhost:56159/node_modules/@angular/core//bundles/core.umd.js:7192:80)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386ZoneTask.invoke @ zone.js:308
zone.js:357 Error: Uncaught (in promise): Error: No provider for ElementRef!(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386ZoneTask.invoke @ zone.js:308

its strange! it should work. Which zone.js version are you using in final version? — micronyks, Oct 01 '16 at 16:01
`^0.6.25` is my zone version. I am also using the ng2-charts and ng2-grid libraries, which I think might be calling ElementRef somewhere, so I was thinking I might be able to just include it everywhere — blubberbo, Oct 01 '16 at 16:05

score 1 · Answer 1 · answered Oct 02 '16 at 02:56

Try to remove ElementRef from imports array and paste it into array of providers:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';
@NgModule({
    declarations: [DashboardComponent, WidgetBankComponent, DataTableDirectives, OrderBy],
    exports: [DashboardComponent, WidgetBankComponent],
    imports: [BrowserModule, HttpModule, FormsModule, ChartsModule],
    providers: [ChartService, GridService, WidgetsControlService, GridViewService, ApplicationSettingsService, DataService, ToolsService, LocalStorageService, RuntimeCompiler, COMPILER_PROVIDERS, NgGrid, NgGridItem, ElementRef],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

that creates the same error as in the original posting :( – blubberbo Oct 02 '16 at 03:39 — blubberbo, Oct 02 '16 at 03:39
@blubberbo, you run `tsc` from your root project folder? – ktretyak Oct 02 '16 at 03:43 — ktretyak, Oct 02 '16 at 03:43

score 0 · Answer 2 · answered Oct 01 '16 at 15:33

0

use it at individual component level where you need it.

import {  ElementRef } from '@angular/core';
@Component({
 ....
})
export class DashboardComponent{
    constructor(private el:ElementRef){}
}

answered Oct 01 '16 at 15:33

micronyks

54,797
15
112
146

then i get `zone.js:355 Unhandled Promise rejection: No provider for ElementRef! ; Zone: ; Task: Promise.then ; Value: NoProviderError`... which leads me to believe i am referencing it somewhere, but i have no idea how to find out where. it might be a plugin i have, so i wanted to try and add it as a provider for all plugins – blubberbo Oct 01 '16 at 15:41
remove `ElementRef` from `imports` and do as I said. – micronyks Oct 01 '16 at 15:42
I removed it from the imports and i added it to the component like you said, and now i get `no provider...` – blubberbo Oct 01 '16 at 15:43

Angular 2 Release "Unexpected value 'ElementRef' imported by the module"

2 Answers2

Linked