NullInjectorError: No provider for ElementRef

[Mithra B]

Hi,

I'm trying out the uploader example given in the link, (Edit in StackBlitz)

https://ej2.syncfusion.com/angular/demos/#/fabric/uploader/default

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,

default.component.ts:

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

*/

@Component({

selector: 'control-content',

templateUrl: 'default.component.html',

styleUrls: ['default.component.css'],

encapsulation: ViewEncapsulation.None

})

export class DefaultUploaderComponent {

@ViewChild('defaultupload')

public uploadObj: UploaderComponent;

@ViewChild('checkbox')

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;

this.uploadObj.clearAll();

}

public onFileRemove(args: RemovingEventArgs): void {

args.postRawFile = false;

}

}

app.module.ts:

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';

@NgModule({

imports: [SharedModule, CheckBoxModule, UploaderModule, DialogModule, FormsModule, CommonModule, ReactiveFormsModule, HttpModule, JsonpModule, BrowserModule],

declarations: [DefaultUploaderComponent],

//providers : [ElementRef],

bootstrap: [DefaultUploaderComponent]

})

export class AppModule { }

[Christopher Issac Sunder K]

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, 

Sample: http://www.syncfusion.com/downloads/support/forum/140917/ze/Angular-ej2-upload33932736 

 

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, 

 

[.cs] 

// check whether the file is already uploaded 

if (!File.Exists(fileSavePath)) 

{ 

    // save the file in server 

    httpPostedFile.SaveAs(fileSavePath); 

    // View the uploaded file using document editor or a webpage 

    Process.Start(fileSavePath); 

} 

 

For more information, please get the upload save and remove action file in the below location, 

.cs file: http://www.syncfusion.com/downloads/support/forum/140917/ze/FileUploadController-2098037962 

Please let us know if you need any further assistance. 

Thanks, 

Christo

[Mithra B]

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,

Mithra.

[Prince Oliver]

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. 

Regards, 

Prince 

[Mithra B]

Hi sir,

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

Thanks,

Mithra 

[Prince Oliver]

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, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_with_angular-file_upload-1544097633.zip  

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, 

/ClientApp/app/components/app 

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

UG documentation: https://ej2.syncfusion.com/angular/documentation/getting-started/aspnet-core 

Regards, 

Prince