Ошибка при установке fullcalendar в Asp. net Core с Angular

Question

Я пытаюсь использовать пакет fullcalendar, но каждый раз, когда он установлен и настроен, всегда возвращаю "невозможно получить /", и если удалить импорт fullcalendar, он снова работает, и это происходит со всеми пакетами

this это мой app.module.ts в этой части добавьте импорт fullcalendar

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ReactiveFormsModule } from '@angular/forms'
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';

import { TableUserComponent } from './components/table-user/table-user.component';
import { TableTaskComponent } from './components/table-task/table-task.component';

import { UserService } from './services/User.Service';
import { TaskService } from './services/Task.Service';
import { ProjectService } from './services/Project.Service';

import { HttpModule } from '@angular/http';
import { MaintenanceUserComponent } from './components/maintenance-user/maintenance-user.component';
import { UserFormMaintenanceComponent } from './components/user-form-maintenance/user-form-maintenance.component';
import { FormTaskComponent } from './components/form-task/form-task.component';
import { TableProjectComponent } from './components/table-project/table-project.component';
import { FormProjectComponent } from './components/form-project/form-project.component';
import { FormDepartmentComponent } from './components/form-department/form-department.component';
import { TableDepartmentComponent } from './components/table-department/table-department.component';
import { DepartmentService } from './services/Department.Service';
import { FormTaskassignedComponent } from './components/form-taskassigned/form-taskassigned.component';
import { TableTaskassignedComponent } from './components/table-taskassigned/table-taskassigned.component';
import { TaskAssignedService } from './services/TaskAssigned.Service';

import { TaskComponent } from './components/task/task.component';
import { ProjectComponent } from './components/project/project.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { DashboardService } from './services/dashboard.service';
import { DashboardProjectComponent } from './components/dashboard-project/dashboard-project.component';
import { TableToDoComponent } from './components/table-to-do/table-to-do.component';
import { ToDoService } from './services/todo.service';
import { CommentTaskService } from './services/CommentTask.Service';
import { CommentProjectService } from './services/CommentProject.Service';
import { CalendarComponent } from './components/calendar/calendar.component';
import { ReportsComponent } from './components/reports/reports.component';
import { LoginComponent } from './components/login/login.component';


import { FullCalendarModule } from '@fullcalendar/angular';


@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    TableUserComponent,
    MaintenanceUserComponent,
    UserFormMaintenanceComponent,
    TableTaskComponent,
    FormTaskComponent,
    TableProjectComponent,
    FormProjectComponent,
    FormDepartmentComponent,
    TableDepartmentComponent,
    FormTaskassignedComponent,
    TableTaskassignedComponent,
    TaskComponent,
    ProjectComponent,
    DashboardComponent,
    DashboardProjectComponent,
    TableToDoComponent,
    CalendarComponent,
    ReportsComponent,
    LoginComponent,

  ],
  imports: [
    HttpModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    FullCalendarModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },

      //Users
      { path: 'list-user', component: TableUserComponent },
      { path: 'maintenance-user', component: MaintenanceUserComponent },
      { path: 'form-user/:id', component: UserFormMaintenanceComponent },

      //Task
      { path: 'list-task', component: TableTaskComponent },
      { path: 'form-task/:id', component: FormTaskComponent },

      //project
      { path: 'list-project', component: TableProjectComponent },
      { path: 'form-project/:id', component: FormProjectComponent },

      //deparments
      { path: 'list-department', component: TableDepartmentComponent },
      { path: 'form-department/:id', component: FormDepartmentComponent },

      //taskAssgines
      { path: 'list-taskassigned', component: TableTaskassignedComponent },
      { path: 'form-taskassigned/:id', component: FormTaskassignedComponent },

      // view task
      { path: 'task/:id', component: TaskComponent },
      // view project
      { path: 'project/:id', component: ProjectComponent },
      // view Dashboard
      { path: 'dashboard', component: DashboardComponent },
      // view Dashboar-Project
      { path: 'dashboard-project', component: DashboardProjectComponent },
      // vire Todo list
      { path: 'todo-list', component: TableToDoComponent },
      //login
      { path: 'login', component: LoginComponent }
      //
      { path: 'calendar', component: CalendarComponent }
    ])
  ],
  providers: [UserService, TaskService, ProjectService, DepartmentService, TaskAssignedService, DashboardService, ToDoService, CommentTaskService, CommentProjectService],
  bootstrap: [AppComponent]
})
export class AppModule { }

это мой calendar.component.ts в этой части используйте компонент пакета

import { FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGrigPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction'; // for dateClick


@Component({
  selector: 'calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent{
  @ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template

  calendarVisible = true;
  calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
  calendarWeekends = true;
  calendarEvents: EventInput[] = [
    { title: 'Event Now', start: new Date() }
  ];

  toggleVisible() {
    this.calendarVisible = !this.calendarVisible;
  }

  toggleWeekends() {
    this.calendarWeekends = !this.calendarWeekends;
  }

  gotoPast() {
    let calendarApi = this.calendarComponent.getApi();
    calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
  }

  handleDateClick(arg) {
    if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
      this.calendarEvents = this.calendarEvents.concat({ // add new event data. must create new array
        title: 'New Event',
        start: arg.date,
        allDay: arg.allDay
      })
    }
  }

}

это мой календарь. компонент. html

  <div class='app-top'>
    <button (click)='toggleVisible()'>toggle visible</button>
    <button (click)='toggleWeekends()'>toggle weekends</button>
    <button (click)='gotoPast()'>go to a date in the past</button>
    (also, click a date/time to add an event)
  </div>

  <div class='app-calendar' *ngIf="calendarVisible">
    <full-calendar #calendar
                   defaultView="dayGridMonth"
                   [header]="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
                   [plugins]="calendarPlugins"
                   [weekends]="calendarWeekends"
                   [events]="calendarEvents"
                   (dateClick)="handleDateClick($event)"></full-calendar>
  </div>

</div>