Support for Angular 12

[TravJav]

Steps to reproduce:

Using Angular 12 with version 5.5.0 for all packages.

    "@fullcalendar/angular": "~5.5.0",
    "@fullcalendar/core": "~5.5.0",
    "@fullcalendar/daygrid": "~5.5.0",
    "@fullcalendar/interaction": "~5.5.0",
    "@fullcalendar/list": "~5.5.0",
    "@fullcalendar/timegrid": "~5.5.0",

I'm having a real hard time trying to implement this I recently upgraded a old Angular 8 project to the most recent version of the stable Angular release and I had this perfectly integrated before with full functionality.

Upon updating, I was able to run the application but there was a lot of buggy behavior of course so I quickly updated the project I followed the V5 documents in the context of importing into app.module and later the component. The reason why this is confusing me is because in V5 we shouldnt have to import the **main.css files that were required once before in style.scss rather it's supposed to be bundled but I am still receiving an error indicating it's missing these? I don't understand what's going on here after investigating and looking at different options would appreciate some help, thank you

Build at: 2021-02-18T05:27:38.598Z - Hash: 67fb6e972eff4cd4c772 - Time: 2598ms

Error: ./node_modules/@fullcalendar/daygrid/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Error: ./node_modules/@fullcalendar/timegrid/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Error: ./node_modules/@fullcalendar/common/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Complete package.json found below

{
  "name": "front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0-next.0",
    "@angular/cdk": "~11.2.0",
    "@angular/common": "^12.0.0-0",
    "@angular/compiler": "~11.2.0",
    "@angular/core": "~12.0.0-next.0",
    "@angular/flex-layout": "~11.0.0-beta.33",
    "@angular/forms": "~12.0.0-next.0",
    "@angular/http": "^6.1.6",
    "@angular/material": "~11.2.0",
    "@angular/platform-browser": "~12.0.0-next.0",
    "@angular/platform-browser-dynamic": "~12.0.0-next.0",
    "@angular/platform-server": "~12.0.0-next.0",
    "@angular/router": "~12.0.0-next.0",
    "@auth0/angular-jwt": "^3.0.0",
    "@fullcalendar/angular": "~5.5.0",
    "@fullcalendar/core": "~5.5.0",
    "@fullcalendar/daygrid": "~5.5.0",
    "@fullcalendar/interaction": "~5.5.0",
    "@fullcalendar/list": "~5.5.0",
    "@fullcalendar/timegrid": "~5.5.0",
    "@google/maps": "^0.4.5",
    "@types/crypto-js": "^3.1.47",
    "@types/googlemaps": "^3.43.3",
    "@types/socket.io-client": "^1.4.35",
    "angular-bootstrap-md": "~10.1.1",
    "angular-calendar": "^0.25.2",
    "angular-custom-modal": "^1.2.0",
    "angular-material-fileupload": "^3.0.1",
    "angular-star-rating": "^4.0.0-beta.3",
    "angular2-calendar-heatmap": "~0.2.3",
    "angularx-flatpickr": "^6.5.2",
    "angularx-qrcode": "^2.3.5",
    "bootstrap": "^4.6.0",
    "bootstrap-material-design": "^4.1.3",
    "chart.js": "^2.9.4",
    "chartjs": "^0.3.24",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-datalabels": "^0.7.0",
    "core-js": "^2.6.12",
    "crypto-js": "^3.1.9-1",
    "css-loader": "^5.0.2",
    "css-star-rating": "^1.2.4",
    "echarts": "^4.9.0",
    "flatpickr": "^4.6.9",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^5.5.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "moment": "^2.29.1",
    "ng-bootstrap": "^0.46.0",
    "ng-chat": "^1.2.0",
    "ng-starrating": "^1.0.20",
    "ng2-charts": "^2.4.2",
    "ng4-loading-spinner": "^1.1.3",
    "ngx-cookie-service": "^11.0.2",
    "ngx-echarts": "^5.2.2",
    "ngx-infinite-scroll": "^7.2.0",
    "ngx-moment": "^4.0.1",
    "ngx-smart-modal": "^7.4.1",
    "ngx-spinner": "^6.1.2",
    "package.json": "^2.0.1",
    "popper.js": "^1.12.9",
    "recordrtc": "^5.6.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.3",
    "socket.io-client": "^2.4.0",
    "webpack": "^4.46.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.0",
    "@angular/cli": "^11.2.0",
    "@angular/compiler-cli": "^11.2.0",
    "@angular/language-service": "^11.2.0",
    "@types/jasmine": "^2.8.17",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.5.5",
    "@types/node": "^10.17.51",
    "codelyzer": "^6.0.1",
    "eslint": "~7.20.0",
    "jasmine-core": "^3.6.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^6.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.5.4",
    "ng-packagr": "^11.2.1",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "protractor": "^7.0.0",
    "rxjs-tslint": "~0.1.8",
    "ts-node": "~4.1.0",
    "typescript": "~4.1.5"
  }
}

[TravJav]

@acerix could you check this out please?, thank you

[TravJav]

Rolled back to Angular 10, Im going to keep this thread updated so it may help others in the future if they encounter the same issue. I will write package.jsons below.

[acerix]

The component only supports Angular 11 so I believe you need to use that version (or 10) until it's updated for 12.

[s-uds]

Hello,

When do you plan on supporting Angular 12? Is there any specific complex issues to get around?

Thanks!

[EmaGht]

Even if not officially supported, version 5.7.0 works with Angular 12 (12.0.1, to be specific)