Dependencies solving for GridComponent in @syncfus

Question

I followed this tutorial http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html

How ever when I run my project, the JIT encounter this error

The InteliSense also show the same error

I set up the SyncFusionModule as Angular Module to export all "Syncfusion EJ 2 for Angular" components I'm planning to use in the BenchmarkModule. The GridComponent in @syncfusion/ej2-ng-grids/src/grid/index can be picked up by Angular; therefore, it is recognized as an Angular component. However, the datasouce is not declared in 'GridComponent' but in its parent Grid which is not Angular component but a standard one declared in @syncfusion\ej2-grids. It seems like I missed an dependencies import somewhere to help Angular find the definition for Grid. But I wasn't sure how to resolve this issue.

At first, I thought it's due to the fact that I skipped the SystemJS mapping which described in http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html#configuring-system-js; therefore, I raised this question Webpack solution for SystemJS mapping. But one of the answers suggested me it may not the reason.

Here is the GitHub repo https://github.com/lamLeX/IocPerformance/tree/gh-pages/IocPerformanceResultWebApp/src/app in case one would like to know how the files are structured to help me with the dependencies resolving because I don't have much experience in JS dependencies resolving; especially ES6 modules resolve.

Update from the answer: The trouble code is taken from this example http://ej2.syncfusion.com/angular/demos/#/grid/grouping and I have notified SyncFusion team about the bug in sample code.

<div class="control-section">
<ej-grid height="320" [datasource]="data" [groupsettings]="groupOptions" [allowgrouping]="true" allowsorting="true" allowpaging="true">
    <e-columns>
        <e-column field="Inventor" width="180" headertext="Inventor Name"></e-column>
        <e-column field="NumberofPatentFamilies" width="220" textalign="right" headertext="Number of Patent Families"></e-column>
        <e-column field="Country" width="140" headertext="Country"></e-column>
        <e-column field="Active" width="120"></e-column>
        <e-column field="Mainfieldsofinvention" width="200" headertext="Main fields of invention"></e-column>
    </e-columns>
</ej-grid>
<div style="margin-top: 10px; text-align: right">Source:
    <a href="https://en.wikipedia.org/wiki/List_of_prolific_inventors" target="_blank">Wikipedia: List of Prolific inventors</a>
</div>    
</div>

Answer 1

It is be ej2-ng-grids, not ej2-grids, and GridModule is right there. So it should be

import { NgModule } from '@angular/core';
import { GridModule, GridComponent, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-ng-grids';

@NgModule({
  imports: [GridModule],
  exports: [GridModule],
  declarations: [],
  providers: [PageService, SortService, FilterService, GroupService]
})
export class SyncFusionModule { }

And there is no need to do that because this is already done in GridAllModule. It should be imported in application module instead of custom SyncFusionModule.

Additionally, code above contains wrong inputs - datasource, etc.They should bedataSource` and so on, according to the documentation.