We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

NullInjectorError: No provider for ElementRef

I'm trying out the uploader example given in the link, (Edit in StackBlitz)
to upload a document. But when I run the application with ng serve, I'm getting this error in the localhost.
ERROR Error: StaticInjectorError(AppModule)[CheckBoxComponent -> ElementRef]: StaticInjectorError(Platform: core)[CheckBoxComponent -> ElementRef]: NullInjectorError: No provider for ElementRef!

I have removed both the files (default.html and default.css) and placed in the default.component.html and default.component.css respectively.

And if I give ElementRef in providers in app.module.ts, I'm getting the following error,
Uncaught Error: Can't resolve all parameters for ElementRef: (?)
Do we need to have both the .cs files to run the application (upload-save-action.cs and upload-remove-action.cs) given in the source tab?
And also how to view this particular uploaded document using document editor?
Awaiting a favourable reply.
Thanks in advance.
Here is the code,
import { Component, ViewChild, ViewEncapsulation, Inject, ElementRef } from '@angular/core';
import { EmitType, detach } from '@syncfusion/ej2-base';
import { UploaderComponent, RemovingEventArgs } from '@syncfusion/ej2-angular-inputs';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';

* Default Uploader Default Component
selector: 'control-content',
templateUrl: 'default.component.html',
styleUrls: ['default.component.css'],
encapsulation: ViewEncapsulation.None
export class DefaultUploaderComponent {

public uploadObj: UploaderComponent;
public checkboxObj: CheckBoxComponent;

public path: Object = {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'

public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement;

public changeHandler: EmitType<Object> = () => {
this.uploadObj.autoUpload = this.checkboxObj.checked;

public onFileRemove(args: RemovingEventArgs): void {
args.postRawFile = false;

import { DefaultUploaderComponent } from './default/default.component';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import 'rxjs/add/operator/map';
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';

import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UploaderModule, UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { CheckBoxModule, CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
import { SharedModule } from './common/shared.module';

imports: [SharedModule, CheckBoxModule, UploaderModule, DialogModule, FormsModule, CommonModule, ReactiveFormsModule, HttpModule, JsonpModule, BrowserModule],
declarations: [DefaultUploaderComponent],
//providers : [ElementRef],
bootstrap: [DefaultUploaderComponent]
export class AppModule { }

5 Replies

CI Christopher Issac Sunder K Syncfusion Team November 15, 2018 12:45 PM UTC

Hi Mithra, 

Thank you for contacting Syncfusion support. 

Query1: But when I run the application with ng serve, I'm getting this error in the localhost. 
We are unable to reproduce the reported issue in our end. For your convenient we have prepared simple uploader sample in angular. Please get that sample in the below location, 
Query2: Do we need to have both the .cs files to run the application which are given in source tab 
No need. Because those .cs files are service files for save and remove actions of uploader. 

Query3: how to view this particular uploaded document using document editor? 
You can view the uploaded document in server side by using Process class which is obtained in the System.Diagnostics namespace. Please refer the below code snippet, 
// check whether the file is already uploaded 
if (!File.Exists(fileSavePath)) 
    // save the file in server 
    // View the uploaded file using document editor or a webpage 
For more information, please get the upload save and remove action file in the below location, 

Please let us know if you need any further assistance. 


MB Mithra B November 15, 2018 03:38 PM UTC

Hello sir,
               Thank you so much for the response. Both the file upload and document editor are working perfectly. But I need to combine these both ie., you upload a file and I need to view the uploaded file immediately with the help of document editor. Both functionalities in the same project. Awaiting a favourable reply.

Thanks in advance,

PO Prince Oliver Syncfusion Team November 16, 2018 06:28 PM UTC

Hi Carducci, 

Thank you for your update. 

To use the server side and client-side codes in the same project, we suggest you to migrate to asp.net core project using angular. If this is your requirement, kindly let us know. We will share the project in asp.net core using angular. 


MB Mithra B November 17, 2018 05:01 PM UTC

Hi sir,
           Thanks for the update. Kindly share the project in asp.net using angular.


PO Prince Oliver Syncfusion Team November 20, 2018 04:14 PM UTC

Hi Carducci,  

Thank you for your update. 

We have prepared the Uploader asp.net sample using angular. Please find the sample in the below location, 

In the above sample, service for the save and remove actions is placed in the controller part and angular part of the project is placed in the below location, 

For more information please refer the below UG documentation on how to create asp.net project using angular 


Live Chat Icon For mobile
Up arrow icon