当前位置： 文江博客 话题详情

Angular 14：FullCalendar进口使编译失败

发布于 2025-02-12 05:46:07 字数 1901 浏览 2 评论 0 原文

因此，基本上，我想在我的Angular 14应用程序中添加 @fullcalendar/angular的日历，其中我使用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>;

您对此有所了解吗？提前提前。

原文

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

三生殊途 2025-02-19 05:46:07

对你也一样。但是我尝试使用Angular 13，然后正常工作。

https://fullcalendar.io/docs/angular 有关更多信息

same to you. but i try with angular 13 then it's working ok.

https://fullcalendar.io/docs/angular for more information

回复 原文
抹茶夏天i‖ 2025-02-19 05:46:07

发现这是一个角度问题。
一个修复程序是在Angular.json中导入FullCalendar的CSS文件：

"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.log(err);
    }
    var result = data.replace("import './main.css';", "");

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

您必须将其放在文件树中的根级别。然后在类似的样式文件中手动添加CSS导入：

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

源：

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

回复 原文
避讳 2025-02-19 05:46:07

从Angular CLI 13-＆GT进行更新时，我遇到了这个问题。 14

解决方案： https://github.com/fullcalendar/fullcalendar-angular/issues/403#issuecomment-1150437324

I had this problem when updating from Angular Cli 13 -> 14

Solution : https://github.com/fullcalendar/fullcalendar-angular/issues/403#issuecomment-1150437324

回复 原文
~没有更多了~

关于作者

不再见

暂无简介

文章
评论
349 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文