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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

NullInjectorError: No provider for ElementRef

Thread ID:

Created:

Updated:

Platform:

Replies:

140917 Nov 14,2018 07:24 AM UTC Nov 20,2018 04:14 PM UTC Angular - EJ 2 5
loading
Tags: Uploader
Mithra B
Asked On November 14, 2018 07:24 AM UTC

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 [Syncfusion]
Replied On 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, 
 
[.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, 

Please let us know if you need any further assistance. 

Thanks, 
Christo

Mithra B
Replied On 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,
Mithra.

Prince Oliver [Syncfusion]
Replied On 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. 

Regards, 
Prince 


Mithra B
Replied On November 17, 2018 05:01 PM UTC

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





Thanks,
Mithra 

Prince Oliver [Syncfusion]
Replied On 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, 
/ClientApp/app/components/app 

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

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;