Angular 14 : fullcalendar imports make the compilation fail

user_19459458 0
Viewed 1098

So basically, I'd like to add a calendar with @fullcalendar/angular to my Angular 14 app, in which I use scss ( idk if it is relevant ).

The thing is when I import what I need in App.modules.ts like so :

...
import { FullCalendarModule } from '@fullcalendar/angular'; 
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';

FullCalendarModule.registerPlugins([ 
  interactionPlugin,
  dayGridPlugin
]);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FullCalendarModule,
    HttpClientModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

The compilation fails and I get these errors :

Compiled with problems:X

ERROR in ../node_modules/@fullcalendar/common/main.css 4:0

Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* classes attached to <body> */
| /* TODO: make fc-event selector work when calender in shadow DOM */
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;


ERROR in ../node_modules/@fullcalendar/daygrid/main.css 2:0

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }


ERROR

../node_modules/@fullcalendar/angular/lib/fullcalendar.component.d.ts:17:18 - error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

17     static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<FullCalendarComponent, "full-calendar", never, { "options": "options"; "deepChangeDetection": "deepChangeDetection"; }, {}, never, never, false>;

Have you an idea about that ? Thx in advance.

angular fullcalendar compiler-errors
3 Answers
user_119511840

Found out it was an Angular issue. A fix is to import fullcalendar's CSS files in angular.json like so :

"styles": [
              ...
              "node_modules/@fullcalendar/common/main.css",
              "node_modules/@fullcalendar/daygrid/main.css"
            ],

Another fix is to add a script that will remove auto import of the CSS. It makes something like that :

const fs = require("fs");

const files = [
  "node_modules/@fullcalendar/common/main.js",
  "node_modules/@fullcalendar/daygrid/main.js",
  "node_modules/@fullcalendar/timegrid/main.js"
];

for (const fullCalendarFile of files) {
  fs.readFile(fullCalendarFile, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }
    var result = data.replace("import './main.css';", "");

    fs.writeFile(fullCalendarFile, result, "utf8", function (err) {
      if (err) return console.log(err);
    });
  });
}

You have to put it at root level in the file tree. And then add CSS import manually in a style file like so :

// temporarily import fullcalendar css
@import "@fullcalendar/common/main.css";
@import "@fullcalendar/daygrid/main.css";

Source : https://github.com/fullcalendar/fullcalendar-angular/issues/403

user_194594580
user_194763220
Related