В общем, я хотел бы добавить календарь с @fullcalendar/angular в свое приложение Angular 14, в котором я использую scss (idk, если это уместно).
Дело в том, что когда я импортирую то, что мне нужно, в App.modules.ts вот так:
...
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]
})
Компиляция завершается неудачно, и я получаю следующие ошибки:
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>;
Вы имеете представление об этом? Спасибо заранее.
🤔 А знаете ли вы, что...
Фреймворк Angular имеет большое количество сторонних библиотек и расширений для расширения функциональности.
Выяснил, что это проблема Angular. Исправление состоит в том, чтобы импортировать файлы CSS полного календаря в angular.json следующим образом:
"styles": [
...
"node_modules/@fullcalendar/common/main.css",
"node_modules/@fullcalendar/daygrid/main.css"
],
Еще одно исправление — добавить скрипт, который удалит автоматический импорт CSS. Получается что-то вроде этого:
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.info(err);
}
var result = data.replace("import './main.css';", "");
fs.writeFile(fullCalendarFile, result, "utf8", function (err) {
if (err) return console.info(err);
});
});
}
Вы должны поместить его на корневой уровень в дереве файлов. А затем добавьте импорт CSS вручную в файл стиля следующим образом:
// temporarily import fullcalendar css
@import "@fullcalendar/common/main.css";
@import "@fullcalendar/daygrid/main.css";
Источник : https://github.com/fullcalendar/fullcalendar-angular/issues/403
и тебе того же. но я пытаюсь с угловым 13, тогда он работает нормально.
https://fullcalendar.io/docs/угловой для получения дополнительной информации
У меня была эта проблема при обновлении с Angular Cli 13 -> 14.
Решение: https://github.com/fullcalendar/fullcalendar-angular/issues/403#issuecomment-1150437324