代码之家  ›  专栏  ›  技术社区  ›  Idris.AH

角度-安装库完整日历时出错

  •  0
  • Idris.AH  · 技术社区  · 6 年前

    我正在尝试安装此日历库( https://www.npmjs.com/package/angular2-fullcalendar ),但是,按照这些步骤,我得到以下错误:

    ERROR in node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(8,10): error TS2305: Module '"<...>/node_modules/rxjs/Subject"' has no exported member 'Subject'.
    node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(9,10): error TS2305: Module '"<...>/node_modules/rxjs/Observable"' has no exported member 'Observable'.
    node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(10,10): error TS2305: Module '"<...>/node_modules/rxjs/Subject"' has no exported member 'Subject'.
    node_modules/angular2-fullcalendar/node_modules/@angular/core/src/util/lang.d.ts(8,10): error TS2305: Module '"<...>/node_modules/rxjs/Observable"' has no exported member 'Observable'.
    node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
    node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
    

    Chrome控制台给出以下错误:

    Uncaught Error: Can't construct a query for the property "myCalendar" of "HomeComponent" since the query selector wasn't defined.
    

    我已经按照步骤通过npm安装了它,在app.module.ts中导入了CalendarComponent,并在@NgModule下的声明中声明了它。

    然后,我创建了一个名为home.component.ts的组件,并按照说明在中复制了以下内容。

    import { Component, OnInit } from '@angular/core';
    import { PageEvent } from '@angular/material';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      // MatPaginator Inputs
      length = 100;
      pageSize = 10;
      pageSizeOptions: number[] = [5, 10, 25, 100];
    
      // MatPaginator Output
      pageEvent: PageEvent;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      setPageSizeOptions(setPageSizeOptionsInput: string) {
        this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
      }
    
      calendarOptions:Object = {
        height: 'parent',
        fixedWeekCount : false,
        defaultDate: '2016-09-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
          {
            title: 'All Day Event',
            start: '2016-09-01'
          },
          {
            title: 'Long Event',
            start: '2016-09-07',
            end: '2016-09-10'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2016-09-09T16:00:00'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2016-09-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2016-09-11',
            end: '2016-09-13'
          },
          {
            title: 'Meeting',
            start: '2016-09-12T10:30:00',
            end: '2016-09-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2016-09-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2016-09-12T14:30:00'
          },
          {
            title: 'Happy Hour',
            start: '2016-09-12T17:30:00'
          },
          {
            title: 'Dinner',
            start: '2016-09-12T20:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2016-09-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2016-09-28'
          }
        ]
      };
    }
    

    我在中添加了此选择器:

    <angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
    

    已在my main style.css中导入此内容:

    @import "fullcalendar/dist/fullcalendar.min.css";
    

    我将日历添加为view child。

    我的angular.json有以下内容:

    "angular2-fullcalendar": "^1.0.19",
    "ap-angular2-fullcalendar": "^1.6.4",
    

    感谢您的帮助!

    1 回复  |  直到 6 年前
        1
  •  2
  •   Brad Axe    6 年前

    这是因为Angular6使用RxJS v6发动机 . 您尝试使用的日历包已经过时,并且使用的是目录不同的旧版本RxJS。 你能做的就是尝试 npm install rxjs@6 rxjs-compat@6 --save 在product目录中,它将为尚未更新为RxJS的依赖项安装一个兼容层 v6发动机 .
    希望这有帮助。
    More Info


    至于你在评论中的错误,这里是我如何安装/使用这个包的。
    在项目目录中:
    npm i ap-angular2-fullcalendar jquery --save
    

    要结合使用jquery和fullcalendar,您需要键入:

    npm i --save-dev @types/jquery@3.2.7
    

    将jquery和日历组件导入app模块。声明日历组件。

    import * as $ from 'jquery'
    import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";
    
    ...
    
    declarations: [CalendarComponent],
    

    剩下的部分,我只使用了您提供的代码—只更改了这一行:

    calendarOptions:Object = {
        height: '600px',
        ...
    }
    


    Source

    推荐文章