Angular 14: импорт полного календаря приводит к сбою компиляции

В общем, я хотел бы добавить календарь с @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 имеет большое количество сторонних библиотек и расширений для расширения функциональности.


2
464
3

Ответы:

Решено

Выяснил, что это проблема 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


Интересные вопросы для изучения

Проблема установки ngx-bootstrap с Angular 14 (Пакет «ngx-bootstrap» был найден, но не поддерживает схемы)Ошибка: Ошибка сборки модуля (из ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js)Когда я открываю терминал, отображается: «Указанная команда («завершение») недействительна. Чтобы просмотреть список доступных параметров, запустите «ng help»Npm run Неверный синтаксис имени файла, имени каталога или метки томаTypeError: не удается создать «сообщение» свойства для ошибки строки Toastr с использованием AngularЯ не могу запустить «npm run dev», так как Laravel обновился с помощью ViteC Я получаю неверный выводСписок элементов массива numpy - ValueError: значение истинности массива с более чем одним элементом неоднозначно. Используйте a.any() или a.all()C++ Как создать постоянный указатель на функцию?Класс держателя (имеющий ссылки на некоторые объекты) ошибка компиляции: «Нельзя ссылаться - это удаленная функция»