Visual Studio 2017 Core application using Essential JS 2 Angular error 'ejs-datetimepicker' is not a known element

[Bill Lemonis]

Hello,

I've downloaded the example from the thread 36005 and I've run it successfully.

My company needs a demo (as they bought it few weeks ago)demostrating the full set of controls so I tried to convert the above sample to version 16.4. After updating to the latest packages version when I run the app, I got the following error (I've tried with various controls, not just with the datetimepicker):

'ejs-datetimepicker' is not a known element:

1. If 'ejs-datetimepicker' is an Angular component, then verify that it is part of this module.

Many thanks,

Bill

Attachment: Angular_2017_Syncfusion_sample_6ba53421.zip

[Prem Kumar Madhan Raj]

Hi Bill, 

Thanks for contacting Syncfusion Support. 

We have validated the reported issue “ejs-datetimepicker' is not a known element” error occurs while rendering the DateTimePicker component. This error occurs because the DateTimePicker Module is not imported in app.shared.module.ts and home.component.ts file so please import the DateTimePicker Module in the mentioned files as shown in the below code snippet.  

[home.component.ts] 

import { Component, OnInit } from '@angular/core'; 

import { FilterSettingsModel } from '@syncfusion/ej2-ng-grids'; 

import { DataManager } from '@syncfusion/ej2-data'; 

import { DateTimePickerModule } from '@syncfusion/ej2-ng-calendars'; 

@Component({ 

    selector: 'home', 

    templateUrl: './home.component.html', 

})……. 

[app.shared.module.ts] 

import { HttpModule } from '@angular/http'; 

import { RouterModule } from '@angular/router'; 

import { DateTimePickerModule } from '@syncfusion/ej2-ng-calendars'; 

import { AppComponent } from './components/app/app.component'; 

import { NavMenuComponent } from './components/navmenu/navmenu.component'; 

import { HomeComponent } from './components/home/home.component'; 

import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 

import { CounterComponent } from './components/counter/counter.component'; 

@NgModule({ 

    declarations: [ 

        AppComponent,  NavMenuComponent,  CounterComponent,  FetchDataComponent,     HomeComponent 

    ], 

    imports: [ 

        CommonModule, HttpModule,  DateTimePickerModule, FormsModule,       RouterModule.forRoot([ 

            { path: '', redirectTo: 'home', pathMatch: 'full' }, 

            { path: 'home', component: HomeComponent }, 

            { path: 'counter', component: CounterComponent }, 

            { path: 'fetch-data', component: FetchDataComponent } 

        ]) 

    ], 

}) 

export class AppModuleShared { 

} 

In order to render any component, we need to import all the required dependencies so please ensure that the required dependencies (Modules) are imported in your sample. For your convenience, we have attached the edited sample with datetimepicker in the below link. Please check it. 

Sample: http://www.syncfusion.com/downloads/support/forum/136749/ze/DateTimePicker-919742374 

 

To know about how to render DateTimePicker in Angular platform, please check below getting started documentation link. 

Documentation: https://ej2.syncfusion.com/16.1.24/angular/documentation/datetimepicker/getting-started.html 

 

(Note: Since issue has been reported with DateTimePicker, we have created a sample with simple datetimepicker component) 

If you need any further assistance on this, then please get back to us with more information and we will be happy to assist you. 

Regards, 

Prem Kumar M

[Prem Kumar Madhan Raj]

Hi Bill, 

Sorry for the inconvenience.  

Please find the commands to run the sample attached in the previous update. 

1.       npm install 

2.       npm install @syncfusion/ej2-ng-calendars --save 

3.       npm run webpack 

4.       dotnet run 

After executing the commands, please navigate to https://localhost:5000 to see the output. 

Regards, 

Prem Kumar M

[Bill Lemonis]

Thanks Prem Kumar,

It worked like a charm!

As I've seen, the sample makes use of Angular 4.2.5. Could you please provide a sample with an Angular version 5.2.x please

Thanks again,

Bill

[Sureshkumar P]

Hi Bill, 

 

Yes, we can update our angular “4.2.5” version into latest version by executing the below command.    

1.       npm install -g npm-check-updates   

2.       and ncu -u   

If you get any error while running these commands, update your node and npm version. You can follow the instructions given in node-windows-upgrade post to upgrade node and npm. 

 

For your convenience, we have upgraded angular versions with the attached sample.  

sample : http://www.syncfusion.com/downloads/support/forum/136749/ze/DateTimePicker1664595207  

 

Regards, 

Sureshkumar P

[Bill Lemonis]

Many thanks Prem Kumar !!

Reagards,

Bill

[Sureshkumar P]

Hi Bill, 

  

Thanks for your update. 

  

We are glad to hear that your problem is resolved. Please get back to us if you need further assistance. 

  

Regards, 

Sureshkumar P