Hi,
In our main Angular project we use the <ejs-grid>, this is an Angular project that already exists a few years and is upgrade to Angular 8. For testing and prototyping I now use a separate lib newly created in Angular 8. As far as I can see in the several files the Angular Prototyping project 'seems' the same as out Main project.
However when I want to use the <ejs-grid> I get an error:
RROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[GridColumnDirective -> GridComponent]:
StaticInjectorError(Platform: core)[GridColumnDirective -> GridComponent]:
NullInjectorError: No provider for GridComponent!
when I use the <ej-grid> there is no error and it shows the grid.
Because I want the same approach for the prototyping Angular project as for our main project, I want to use also the <ejs-grid>.
From the docs I have seen that the <ej-grid> is j-query and the <ejs-grid> is javascript. My installation was the same for both projects. Can you tel me where I went wrong and ended up with the j-query installation and not the javascript installation?
Underneath the main files where Syncfusion is loaded.
Regards,
Bob
My app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { environment } from '../environments/environment';
import {
AngularFirestoreModule,
FirestoreSettingsToken
} from '@angular/fire/firestore';
import {
AngularFireAuth,
AngularFireAuthModule
} from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireModule } from '@angular/fire';
import { MDBBootstrapModule, MDBBootstrapModulePro, MdbCardComponent} from 'ng-uikit-pro-standard';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './gui/header/header.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ConsultantComponent } from './auth/consultant/consultant.component';
import { MemberComponent } from './customer/member/member.component';
import { FooterComponent } from './gui/footer/footer.component';
import { EJAngular2Module } from 'ej-angular2';
import 'syncfusion-ej-global-all/i18n/ej.culture.nl-NL.min.js';
import 'syncfusion-ej-global-all/l10n/ej.localetexts.nl-NL.min.js';
import {
ContextMenuService,
EditService,
ExcelExportService,
FilterService,
GridModule,
GroupService,
PagerModule,
PageService,
PdfExportService,
RowDDService,
SortService
} from '@syncfusion/ej2-angular-grids';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { IntakeComponent } from './meta-profile/intake/intake.component';
@NgModule({
declarations: [
AppComponent,... other user based components
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AngularFireModule.initializeApp(environment.firebaseAPIKey),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireDatabaseModule, // for database
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
EJAngular2Module.forRoot(),
GridModule,
PagerModule,
DropDownListModule,
AppRoutingModule
],
providers: [
PageService,
FilterService,
SortService,
RowDDService,
EditService,
ContextMenuService,
GroupService,
PdfExportService,
ExcelExportService,
ExcelExportService,
AngularFireAuth,
{ provide: FirestoreSettingsToken, useValue: {}}
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
package.json:
{
"name": "embigius",
"version": "0.0.9",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/fire": "^5.2.3",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-regular-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@syncfusion/ej2": "^17.3.28",
"@syncfusion/ej2-angular-dropdowns": "^17.3.28",
"@syncfusion/ej2-angular-grids": "^17.3.28",
"@syncfusion/ej2-angular-layouts": "^17.3.28",
"@syncfusion/ej2-angular-navigations": "^17.3.27",
"@syncfusion/ej2-base": "^17.3.27",
"@syncfusion/ej2-material-theme": "^17.3.28",
"bootstrap": "^4.3.1",
"cldr-data": "^36.0.0",
"core-js": "^3.4.1",
"ej-angular2": "^17.3.26",
"firebase": "^7.4.0",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"ng-uikit-pro-standard": "git+https://oauth2:xxxx",
"rxjs": "^6.5.3",
"syncfusion-ej-global-all": "^17.3.26",
"syncfusion-javascript": "^17.3.26",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.19",
"@angular/cli": "~8.3.19",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/ej.web.all": "^17.3.2",
"@types/jasmine": "~3.4.6",
"@types/jasminewd2": "~2.0.8",
"@types/jquery": "^3.3.31",
"@types/node": "~12.12.11",
"codelyzer": "^5.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.2",
"ts-node": "~8.5.2",
"tslint": "~5.20.1",
"typescript": "~3.5.3"
}
}
tsconfig.app.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
],
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "/",
"types": [
"jquery",
"ej.web.all"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
