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. Image for the cookie policy date

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:


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. 

                              https://ej2.syncfusion.com/angular/documentation/grid/getting-started/#enable-paging 

If you still faced the issue, could you please share the below details, which will be helpful for us to validate further about issue. 
  1. Please ensure that you are using latest version for all packages
  2. Please create a separate sample using the steps mentioned in the above documentation and check the issue is reproduced or not.
  3. 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

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:
"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }


VS Vasili Svirydau replied to Andrejs Sapals November 21, 2020 08:11 PM UTC

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)
..


VS Vasili Svirydau replied to Marius Nesser December 16, 2020 09:04 PM 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)
..

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. 


Loader.
Up arrow icon