Question

我是角色2的新手。我想使用Primeng的'schedule'。所以我安装了它的包。并在app.module.ts中添加了calendarComponent，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CalendarComponent } from 'angular2-fullcalendar/src/calendar/calendar';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    CalendarComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

//app.component.html
<p-schedule [events]="events"></p-schedule>

但是当我运行代码时，我收到错误：模块'AppModule'声明的意外值'CalendarComponent'。请添加@ Pipe / @ Directive / @ Component注释。

Answer 1

您需要将相关的primeng模块添加到app.module的导入中。因此，在您的情况下，您至少需要从primeng导入ScheduleModule。

import {ScheduleModule} from 'primeng/primeng';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CalendarComponent } from 'angular2-fullcalendar/src/calendar/calendar';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    CalendarComponent
  ],
  imports: [
    BrowserModule,
    ScheduleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

您可能需要导入其他primeng组件作为其中的一部分，具体取决于您在CalendarComponent中使用的内容。

同时查看primeng documentation for schedule component，您需要在index.html页面中引用完整日历以及其他一些依赖项：

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

请参阅：https://fullcalendar.io/docs/usage/

Answer 2

问题是关于fullcalendar插件版本。当您安装angular2-fullcalendar npm时，请使用fullcalendar 3.8.0。

您可以修复此问题，在angular2-fullcalendar之前安装fullcalendar 3.7.0。

// package.json
"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@angular/router": "3.1.1",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "fullcalendar": "3.7.0",
    "angular2-fullcalendar": "^1.1.1",
    "angular2-google-maps": "0.16.0",
    "angulartics2": "1.6.2",
    "assets-webpack-plugin": "^3.4.0",
    "classlist": "^1.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "moment": "2.18.1",
    "ng2-datepicker": "^2.0.0-dev5",
    "ng2-sweetalert2": "^0",
    "raven-js": "^3.19.1",
    "raw-loader": "^0.5.1",
    "rxjs": "5.0.0-beta.12",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.6.17"
  },

然后运行：

$ npm install

如果您愿意，可以安装我的前叉。它使用angular 2.1.1和fullcalendar 3.7.0分叉：

$ npm install iver/ng2-fullcalendar --save

https://github.com/iver/ng2-fullcalendar/

错误：模块'AppModule'声明的意外值'CalendarComponent'。请添加@ Pipe / @ Directive / @ Component注释

2 个答案: