Issue
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.
Solution
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
Answered By - Yoru
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.