Failed to find '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css'

[yahyaoui mohamed khalil]

 Failed to find '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css'

any solutions ?

[Shyam G]

Hi yahyaoui mohamed Khalil, 

 

We have created a sample in which we have imported a diagram material.css file in style.css file. Please refer to a screenshot and sample below. Could you please check in the below sample? Still if you have any issue, please modify the below sample. 

 

Screenshot: 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagram-angular142190233 

 

Regards, 

Shyam G 

[Shyam G]

Hi yahyaoui mohamed Khalil, 

 

Please ignore our previous update 

 

Could you please check whether you have referred a path correctly in your application? We have created a sample in which we have imported a diagram material.css file in style.css file. Please refer to a screenshot and sample below. Could you please check in the below sample? Still if you have any issue, please modify the below sample. 

 

Screenshot: 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagram-angular142190233 

 

Regards, 

Shyam G 

[Hernán]

hi, i have a similar problem, im trying to get the scheduler to work in my project, im currently using angular material to style my app, and then i added the scheduler.

This is the error i get:

ERROR in ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css)

Module build failed (from ./node_modules/postcss-loader/src/index.js):

Error: Failed to find '../node_modules/@syncfusion/ej2-material-theme/styles/material.css'

  in [

    C:\00Desarrollo\reserva-terapia\node_modules\@angular\material\prebuilt-themes

  ]

    at resolveModule.catch.catch (C:\00Desarrollo\reserva-terapia\node_modules\postcss-import\lib\resolve-id.js:35:13)

This is my app.modules.ts:

import { ScheduleModule, RecurrenceEditorModule, DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService } from '@syncfusion/ej2-angular-schedule';

providers: [

    MatDatepickerModule,

    FirebaseService,

    DayService,

    WeekService,

    WorkWeekService,

    MonthService,

    AgendaService,

    MonthAgendaService,

My Styles.CSS file:

@import '../node_modules/@syncfusion/ej2-material-theme/styles/material.css';

My template: <ejs-schedule></ejs-schedule>

[Vengatesh Maniraj]

Hi yahyaoui mohamed Khalil,  

 

We have prepared the below sample with Scheduler component.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/146500/ze/ang-sample1141848942  

Documentation: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1 

Kindly try the above and revert us for further assistance. 

Regards, 

Vengatesh 

[Hernán]

Hi yahyaoui mohamed Khalil,  

 

We have prepared the below sample with Scheduler component.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/146500/ze/ang-sample1141848942  

Documentation: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1 

Kindly try the above and revert us for further assistance. 

Regards, 

Vengatesh 

Hello Vengatesh, i did make it work  by creating a project from zero, but the problem i'm having is when i want to use the scheduler in another project that was already started with other components. 

I get this error:

ERROR in ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css)

Module build failed (from ./node_modules/postcss-loader/src/index.js):

Error: Failed to find '../node_modules/@syncfusion/ej2-material-theme/styles/material.css'

  in [

    C:\00Desarrollo\reserva-terapia\node_modules\@angular\material\prebuilt-themes

  ]

    at resolveModule.catch.catch (C:\00Desarrollo\reserva-terapia\node_modules\postcss-import\lib\resolve-id.js:35:13)

my angular.json and package.json both have the correct lines (i'm using Angular 8) :

"@syncfusion/ej2-material-theme": "~17.3.9" //this is the package.json

 "styles": [

              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

              "src/styles.css",

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "node_modules/primeng/resources/primeng.min.css",

              "node_modules/primeng/resources/themes/nova-light/theme.css",

              "node_modules/primeicons/primeicons.css",

              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"

            ],

[Vengatesh Maniraj]

Hi yahyaoui mohamed Khalil,   

 

Thanks for the update. 

 

Based on the shared details, we have modified our previously updated sample on August 7, 2019, by additionally added the scheduler component in that project. And the sample can be downloaded from the below sample link, 

Sample: https://www.syncfusion.com/downloads/support/forum/146500/ze/sample245019733 

Kindly use the below comment to add Scheduler packages for that project,
npm install @syncfusion/ej2-angular-schedule --save
UG Link: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1#adding-syncfusion-schedule-package 

And we need to add the respective CSS for the Schedule component, 

 

In styles.css file, you can add the dependency css like below, 

 

/* You can add global styles to this file, and also import other style files */
@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css'; 

 

Kindly try the above and revert us for further assistance. 

 

Regards, 

Vengatesh 

[Abdullah]

I fixed it by removing the following from styles in angular.json "./node_modules/@angular/material/prebuilt-themes/<your theme colour>.css"

[Nevitha Ravi]

Hi Abdullah, 

Good day to you. 

We are happy that you have fixed the issue, please get back to us if you need any assistance. 

Regards, 

Nevitha 

[Nurmaan Ramoly]

Hello. I am having the exact same issue. I have looked into the sample offered and it seems it is running on angular 8 while my project is on angular 11. Could you please advise as to whether the modules actually run on angular 11? if not, when can we expect an update?

Attachment: Screenshot_Syncfusion_b27f1460.zip

[Hareesh Balasubramanian]

Hi Nurmaan, 

Thanks for the update. 

Yes, our Syncfusion Scheduler modules work properly in the Angular 11 Cli version and for the same, we have prepared a sample with resources in the Angular 11 as Cli, which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/146500/ze/Angular11SchedulerSample-765747930  

And for further reference, we have taken a screenshot of the above sample, 

 

Kindly try the above solution and please shared the following details if you still face the issue. 

• Whether the issue occurs when rendering scheduler?
• Package version of Syncfusion
• Your package.json file

We will happy to assist you..! 

Regards, 

Hareesh 

[Andy]

I just tried the example from Angular 11 but the problem persists. On ng serve:-

Failed to find '../node_modules/@syncfusion/ej2-base/styles/material.css

[Andy]

I found a fix. This works in Angular 11. Here's an example that works - note the "~" which points to the node_modules folder.

@import "~@syncfusion/ej2-grids/styles/material.css"

[Ravikumar Venkatesan]

Hi Andy, 

  

Greetings from Syncfusion Support. 

  

We are happy that your issue has been resolved at your end. Please get back to us if you need any further assistance. 

  

Regards, 

Ravikumar Venkatesan 

[Maria Madalina]

Thank you very much. It was really helpful!

[Vengatesh Maniraj]

You are most welcome Maria!!!