Geek Answers Handbook

Angular 2 Release "Unexpected ElementRef value imported by module"

I upgraded to version of Angular 2 and I am trying to use ElementRef. First I got an Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef , as indicated 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 get the error (SystemJS) Unexpected value 'ElementRef' imported by the module 'DashboardModule'

any ideas?

Thank you in advance!

EDIT

Was there the mentioned correction in the answer below and now there is this error - here is the complete error - is there a way to say where I need to provide the provider with 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
+1
source share
2 answers

Try removing the ElementRef array from imports and inserting it into the providers array:

 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] })
+1
source

use it at the component level where you need it.

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

More articles:


All Articles