IgniteUI calendar does not load any style in Angular

Question

I've been getting a weird problem while trying to use IgniteUI on Angular. Whatever I try the component just wont render right for some reason. This is the component class:

import { Component, ViewChild, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {ApiService} from "../api.service";
import { IgxCalendarComponent, DateRangeType } from 'igniteui-angular';

@Component({
  selector: 'app-calendarform',
  templateUrl: './calendarform.component.html',
  styleUrls: ['./calendarform.component.css']
})
export class CalendarformComponent implements OnInit {
  @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent;
  public today = new Date(Date.now());

  ngOnInit() {
    this.calendar.disabledDates = [{
      type: DateRangeType.Between,
      dateRange: [
        new Date(1, 1, 1),
        new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDay())
      ]
    }];
  }

  constructor(private router: Router, private service: ApiService) {

  }

  public onSelection(dates: Date | Date[]) {
    console.log(JSON.stringify(dates));
  }

}

This is the html:

<div class="calendar-section">
  <article class="calendar-wrapper">
    <igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true"></igx-calendar>
  </article>
</div>

And this the css:

.calendar-wrapper {
  max-width: 400px;
  min-width: 200px;
  margin: 8px;
}

.igx-calendar {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
}

I've tryed everything I could think of, I added the igniteui-angulr.css import in angular.js but nothing changed. The calendar stye just wont get rendered for some reason. Also another weird thing is that whatever date I click, the one before it gets selected. This is a comparison of what it looks like and what it should look like