Angular 11 getting error from ej2-angular-navigation

[Neha Singh]

Hello Team,

I was working with angular 9 recently upgraded to angular 11. After successful compilation at the time of serving I am getting errors in console. Attaching error screenshot and package.json.

Package.json : 

{

  "name": "iot.condition.monitoring.webapp",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "npm run lint && ng build",

    "build:production": "ng build --aot --buildOptimizer --optimization --prod",

    "test": "ng test",

    "stylelint": "stylelint \"**/*.scss\"",

    "stylelint-fix": "stylelint \"**/*.scss\" --fix",

    "lint": "npm run stylelint && ng lint",

    "e2e": "ng e2e",

    "prettier": "prettier --single-quote --write 'src/**/*.{ts,scss}'",

    "test-headless": "ng test --watch=false --browsers=ChromeHeadless"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~11.2.10",

    "@angular/common": "~11.2.10",

    "@angular/compiler": "~11.2.10",

    "@angular/core": "~11.2.10",

    "@angular/forms": "~11.2.10",

    "@angular/platform-browser": "~11.2.10",

    "@angular/platform-browser-dynamic": "~11.2.10",

    "@angular/router": "~11.2.10",

    "@ngx-translate/core": "^13.0.0",

    "@ngx-translate/http-loader": "^6.0.0",

    "@types/bingmaps": "0.0.1",

    "adal-angular4": "^4.0.12",

    "angular-maps": "^6.0.1",

    "bingmaps": "^2.0.3",

    "bootstrap": "^4.3.1",

    "rxjs": "~6.6.0",

    "tslib": "^2.0.0",

    "zone.js": "~0.11.3"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.1102.9",

    "@angular/cli": "~11.2.9",

    "@angular/compiler-cli": "~11.2.10",

    "@angular/localize": "^11.2.10",

    "@angular/material": "^11.2.2",

    "@angular/platform-browser": "^11.2.10",

    "@angular/platform-browser-dynamic": "^11.2.10",

    "@angular/router": "^11.2.10",

    "@syncfusion/ej2": "^19.1.56",

    "@syncfusion/ej2-angular-buttons": "^19.1.54",

    "@syncfusion/ej2-angular-calendars": "^19.1.56",

    "@syncfusion/ej2-angular-charts": "^19.1.56",

    "@syncfusion/ej2-angular-dropdowns": "^19.1.56",

    "@syncfusion/ej2-angular-grids": "^19.1.56",

    "@syncfusion/ej2-angular-inputs": "^19.1.54",

    "@syncfusion/ej2-angular-layouts": "^19.1.56",

    "@syncfusion/ej2-angular-lists": "^19.1.56",

    "@syncfusion/ej2-angular-navigations": "^19.1.54",

    "@syncfusion/ej2-base": "^19.1.56",

    "@syncfusion/ej2-navigations": "~19.1.57",

    "@types/bingmaps": "^0.0.1",

    "@types/file-saver": "^2.0.2",

    "@types/jasmine": "~3.6.0",

    "@types/jasminewd2": "~2.0.3",

    "@types/mocha": "^8.2.0",

    "@types/node": "^12.11.1",

    "codelyzer": "^6.0.0",

    "file-saver": "^2.0.2",

    "husky": "^4.3.0",

    "jasmine-core": "~3.6.0",

    "jasmine-spec-reporter": "~5.0.0",

    "karma": "~6.1.0",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage": "~2.0.3",

    "karma-coverage-istanbul-reporter": "~2.1.0",

    "karma-jasmine": "~4.0.0",

    "karma-jasmine-html-reporter": "^1.5.0",

    "karma-junit-reporter": "^2.0.1",

    "karma-mocha": "^2.0.1",

    "karma-remap-coverage": "^0.1.5",

    "karma-sonarqube-unit-reporter": "0.0.23",

    "lint-staged": "^10.4.2",

    "mocha": "^8.1.1",

    "moment": "^2.27.0",

    "moment-timezone": "^0.5.31",

    "prettier": "^2.1.2",

    "protractor": "~7.0.0",

    "stylelint": "^13.6.1",

    "stylelint-config-sass-guidelines": "^7.0.0",

    "ts-node": "~8.3.0",

    "tslib": "^2.2.0",

    "tslint": "~6.1.0",

    "typescript": "~4.1.5",

    "xlsx": "^0.16.8"

  }

}

[Sowmiya Padmanaban]

Hi Neha Singh,  

 

Greetings from Syncfusion support. 

 

We have prepared the sample based on your shared package.json file. But we did not faced the mentioned issue.  

 

Sample link:  https://www.syncfusion.com/downloads/support/forum/164681/ze/TreeView919004606.zip 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/ 

  

Please, follow the below link to resolve your issue in your application. 

 

https://stackoverflow.com/questions/60685286/inject-must-be-called-from-an-injection-context-when-using-angular-library-in 

 

https://stackoverflow.com/questions/51485868/inject-must-be-called-from-an-injection-context 

 

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, 

Sowmiya.P