Sidebar Navigation error with scss

[Cagdas Kahraman]

Hi,

if i set up a new angular ionic app with angular 15, just created today, and if i setup a sidebar navigation by an example which you provide, i got the following error:

 HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):

[ng] Error: Can't resolve '~@syncfusion/ej2-angular-navigations/styles/material.css' in '/Users/ck/Documents/projects/OEM/code/erp/erp-frontend/erp-ui/src'

The project exists in the node modules but unfortunaly its throwing an error.

With bests

package.json:

"dependencies": {
  "@angular/common": "^15.0.0",
  "@angular/core": "^15.0.0",
  "@angular/forms": "^15.0.0",
  "@angular/platform-browser": "^15.0.0",
  "@angular/platform-browser-dynamic": "^15.0.0",
  "@angular/router": "^15.0.0",
  "@ionic/angular": "^6.1.9",
  "@syncfusion/ej2": "^20.4.44",
  "@syncfusion/ej2-angular-buttons": "^20.4.44-ngcc",
  "@syncfusion/ej2-angular-dropdowns": "^20.4.43-ngcc",
  "@syncfusion/ej2-angular-inputs": "^20.4.42-ngcc",
  "@syncfusion/ej2-angular-lists": "^20.4.42-ngcc",
  "@syncfusion/ej2-angular-navigations": "^20.4.44",
  "ionicons": "^6.0.3",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^15.0.0",
  "@angular-eslint/builder": "^14.0.0",
  "@angular-eslint/eslint-plugin": "^14.0.0",
  "@angular-eslint/eslint-plugin-template": "^14.0.0",
  "@angular-eslint/template-parser": "^14.0.0",
  "@angular/cli": "^15.0.0",
  "@angular/compiler": "^15.0.0",
  "@angular/compiler-cli": "^15.0.0",
  "@angular/language-service": "^15.0.0",
  "@ionic/angular-toolkit": "^6.0.0",
  "@types/jasmine": "~4.0.0",
  "@types/node": "^12.11.1",
  "@typescript-eslint/eslint-plugin": "5.3.0",
  "@typescript-eslint/parser": "5.3.0",
  "eslint": "^7.6.0",
  "eslint-plugin-import": "2.22.1",
  "eslint-plugin-jsdoc": "30.7.6",
  "eslint-plugin-prefer-arrow": "1.2.2",
  "jasmine-core": "~4.3.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.0.0",
  "ts-node": "~8.3.0",
  "typescript": "~4.8.4"

[Cagdas Kahraman]

Ive found the problem... there are always two packages that could be installed..

Can u explain why is

for example

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

- "@syncfusion/ej2-navigations": "^20.4.44",

Bests

[Sivakumar ShunmugaSundaram]

Hi Cagdas,

Greetings from Syncfusion support.

We have evaluated the reported issue based on the information provided and we suspect that the issue occurs when the relative path of the Styles is not set properly. So, to resolve this issue please refer to the relative path of the Styles based on your project folder structure.

Also, we found that you are utilizing two different packages for Syncfusion controls (20.4.44-ngcc) and (20.4.44) if you want to utilize the Syncfusion components for the Angular version below 12 you must add the ngcc tag for all Syncfusion components referring in the package.json file like "@syncfusion/ej2-angular-grids": "20.4.44-ngcc". For the Angular version above 12, you can refer to the packages without the ngcc tag. So, please make sure on using the same package for all controls since Syncfusion controls are versions we cannot utilize different packages in the same project this will create a conflict on your end.

We would like to inform you that in Syncfusion, there are two packages for most of the controls, one with the Angular-specific implementation and another with the pure JavaScript implementation. The "@syncfusion/ej2-angular-navigations" package is the Angular-specific implementation of the navigation controls, which includes Angular directives and services that make it easy to use the navigation controls in an Angular application. The "@syncfusion/ej2-navigations" package is the pure JavaScript implementation of the navigation controls, which does not include any Angular-specific dependencies and can be used in any JavaScript application, including Angular, React, and Vue applications.