- Home
- Forum
- Angular - EJ 2
- Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
Hello,
I am trying to use AngularJS Grid, but getting the error and data does not shows up.
I have tried to find solution on forums or in google for hours, but nothing helpes as well as following some guidlines.
Error:
I am using the following code:
App.Component.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, GridModule
],
providers: [PageService],
bootstrap: [AppComponent]
})
App.Module.ts:export class AppModule { }
App.Module.ts:
SIGN IN To post a reply.
21 Replies
MS
Manivel Sellamuthu
Syncfusion Team
November 6, 2020 08:07 AM UTC
Hi Andrejs,
Greetings from Syncfusion support.
We have prepared the sample based on steps mentioned in the below documentation. But we did not faced the mentioned issue.
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/#getting-started
If you still faced the issue, could you please share the below details, which will be helpful for us to validate further about issue.
- Please ensure that you are using latest version for all packages
- Please create a separate sample using the steps mentioned in the above documentation and check the issue is reproduced or not.
- Please share the issue replication sample or please share the steps to create the issue replication sample.
Please ensure the above steps, which will help us to narrow down the issue and find the exact cause of the issue.
Regards,
Manivel
VS
Vasili Svirydau
November 20, 2020 12:25 AM UTC
I'm having the same issue with Angular 11 and the Diagram component.
I've followed the getting started guide to no avail.
VS
Vasili Svirydau
November 20, 2020 01:37 AM UTC
I've tried disabling Ivy, which produces different Injector related error, and usual mitigations for that error (allowing symlinking in angular.json or setting tsconfig paths) did not work.
MS
Manivel Sellamuthu
Syncfusion Team
November 20, 2020 01:29 PM UTC
Hi Vasili,
Greetings from Syncfusion support.
Query: I'm having the same issue with Angular 11 and the Diagram component.
I've followed the getting started guide to no avail. I've tried disabling Ivy, which produces different Injector related error, and usual mitigations for that error (allowing symlinking in angular.json or setting tsconfig paths) did not work.
We are unable to reproduce the reported issue at our end. When we try to inject the diagram modules, diagram modules has been injected properly without any issues. So could you please share us a more details of your issue i.e. code snippet of how do you try to inject the diagram modules in your sample or simple sample replicating issue. This would help us to analyze further and provide solution at earliest.
Regards,
Manivel
VS
Vasili Svirydau
November 20, 2020 07:34 PM UTC
npx @angular/cli new test-project
enable strict checks
disable routing
use SCSS
npm install @syncfusion/ej2-angular-diagrams --save
modify src/app/app.module.ts to add the module
add the <ejs-diagram> element to the app.component.ts
build and run, fails with
ERROR Error: inject() must be called from an injection context
ERROR Error: inject() must be called from an injection context
immediately.
AS
Andrejs Sapals
November 21, 2020 10:44 AM UTC
Finally i solved it,
I put this path in the compilerOptions section of tsconfig.app.json of the angular application:
I put this path in the compilerOptions section of tsconfig.app.json of the angular application:
"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }
Finally i solved it,
I put this path in the compilerOptions section of tsconfig.app.json of the angular application:"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }
This did not work for me.
Edit:
Actually it did, but my path was `./node_modules` and not `../`.
I noticed in the error message that the error comes from a copy of angular under `node_modules/@syncfunction/.../@angular/core` so it was using it's own copy instead of a proper peer dependency.
MS
Manivel Sellamuthu
Syncfusion Team
November 23, 2020 11:59 AM UTC
Hi Vasili,
Thanks for your update.
We are unable to reproduce the reported issue at our end. We have created a simple standalone angular app. In the sample when we try to use diagram inject to inject diagram modules, the app has been built successfully without any error. We have attached a sample for your reference. Please find the sample in below link
So please share us a simple sample illustrating issue or modify the above sample replicating issue if you still facing the issue. This would help us to proceed further.
Regards,
Manivel
VS
Vasili Svirydau
November 23, 2020 09:13 PM UTC
Hello Manivel,
Which version of Angular are you using for your repro?
I was able to reproduce it trivially on two separate computers with the latest version of Angular...
Also, you mention the app building without errors. However this error is a runtime error.
Regards,
Vasili
AR
Aravind Ravi
Syncfusion Team
November 25, 2020 04:09 AM UTC
Hi Vasili,
We have checking the diagram component with angular version 9 and node version 10.13.0. In that angular version we does not able to replicate the reported issue at our end. So please share us more details of your issue i.e. in which angular version you have checked the diagram component or any simple sample replicating issue. This would help us to serve you better.
Regards
Aravind Ravi
AS
Andrejs Sapals
November 25, 2020 05:44 AM UTC
Hello,
We use the latest angular verison which is Angular 11.
AR
Aravind Ravi
Syncfusion Team
November 27, 2020 04:07 AM UTC
Hi Andrejs,
We have created a sample with diagram component in Angular 11. In the angular 11 sample we have created a BPMN nodes and injected diagram modules. While build and run the sample, we does not face any error. Please refer below screenshot for angular version
When we run the sample, the sample has been run properly without any runtime error. We have attached a video demonstration of how sample gets work.
We have attached a angular 11 sample for your reference. Please find the sample in below link
Regards
Aravind Ravi
LU
Lukasz
December 7, 2020 02:07 PM UTC
Hello,


I've also came across this issue and I've prepared repo: https://github.com/eLPe21/Angular11Syncfusion
Was following this doc to make this repo: https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/
Thanks in advance for the help
VS
Vasili Svirydau
December 7, 2020 08:20 PM UTC
Look above for setting up paths under compilerOptions
LU
Lukasz
December 8, 2020 11:09 AM UTC
Did the trick however it is not part of the getting started documentation.
AS
Aravinthan Seetharaman
Syncfusion Team
December 10, 2020 04:22 PM UTC
Hi Lukasz,
Thanks for the update.
Let us know, if you need further assistance on this.
Regards,
Aravinthan S.
MN
Marius Nesser
December 16, 2020 11:44 AM UTC
Have the same issue. Have added path ("paths": { "@angular/*": [ "../node_modules/@angular/*" ] }) and "preserveSymlinks": true.
Using *latest angular 11 and *latest syncfusion.
"@syncfusion/ej2-angular-gantt": "18.3.52",
"@syncfusion/ej2-angular-grids": "18.3.53",
"@syncfusion/ej2-angular-inputs": "18.3.53",
"@syncfusion/ej2-angular-kanban": "^18.3.53",
"@syncfusion/ej2-angular-navigations": "18.3.53",
"@syncfusion/ej2-angular-popups": "18.3.52",
Error:
core.js:5967 ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:893)
at ɵɵinject (core.js:903)
at Module.ɵɵdirectiveInject (core.js:14648)
at NodeInjectorFactory.GanttComponent_Factory [as factory] (ej2-angular-gantt.js:542)
at getNodeInjectable (core.js:3503)
at instantiateAllDirectives (core.js:9952)
at createDirectivesInstances (core.js:9301)
at ɵɵelementStart (core.js:14523)
..
Have the same issue. Have added path ("paths": { "@angular/*": [ "../node_modules/@angular/*" ] }) and "preserveSymlinks": true. Using *latest angular 11 and *latest syncfusion. "@syncfusion/ej2-angular-gantt": "18.3.52","@syncfusion/ej2-angular-grids": "18.3.53", "@syncfusion/ej2-angular-inputs": "18.3.53", "@syncfusion/ej2-angular-kanban": "^18.3.53", "@syncfusion/ej2-angular-navigations": "18.3.53", "@syncfusion/ej2-angular-popups": "18.3.52",Error:core.js:5967 ERROR Error: inject() must be called from an injection context at injectInjectorOnly (core.js:893) at ɵɵinject (core.js:903) at Module.ɵɵdirectiveInject (core.js:14648) at NodeInjectorFactory.GanttComponent_Factory [as factory] (ej2-angular-gantt.js:542) at getNodeInjectable (core.js:3503) at instantiateAllDirectives (core.js:9952) at createDirectivesInstances (core.js:9301) at ɵɵelementStart (core.js:14523)..
Try with ./node_modules instead of ../node_modules
GM
Gopinath Muniraj
Syncfusion Team
December 17, 2020 02:10 PM UTC
Hi All,
The Gantt is working as expected in the angular 11. We couldn’t find any errors on it. The Gantt is running with its functionalities without any runtime error.
We have prepared a sample for your reference. Please get the sample from below link.
Please let us know if you have any concerns.
Regards,
Gopinath M
SM
Saurabh Mehta
May 22, 2021 09:07 AM UTC
Appending this path in the compilerOptions section of tsconfig.app.json of the angular application solved this error for me!
"paths": { "@angular/*": [ "./node_modules/@angular/*" ] }
PP
Pooja Priya Krishna Moorthy
Syncfusion Team
May 24, 2021 07:25 AM UTC
Hi Saurabh,
We are happy to hear that your problem has been resolved.
Please feel free to contact us if you would have any other queries. As always, we will be happy to assist you.
Regards,
Pooja K.
SIGN IN To post a reply.
- 21 Replies
- 10 Participants
-
AS Andrejs Sapals
- Nov 5, 2020 11:18 PM UTC
- May 24, 2021 07:25 AM UTC