0
我很新Angular 2 \ 4和PrimeNG。为什么我会获得所有这些尝试实现包装PrimeNG Schedule组件的自定义compoent的错误？
我要疯了试图复制本教程涉及PrimeNG的附表组件：https://www.primefaces.org/primeng/#/schedule
如果您单击的例子下来源标签上显示这个例子的代码（我认为这是与这个例子有关的代码...）。
我正在尝试创建自定义自定义时间表组件，该组件包装由PrimeNG提供的此计划组件。
所以我在我的项目中创建了一个自定义时间表文件夹。
到这个文件夹，我把这些文件：
1）定制schedule.component.html（视图），仅仅包含此：
<p-schedule [events]="events"></p-schedule>
到schow的输出PrimeNG计划组件。
2）定制schedule.component.ts（控制器），简单地包含此：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-custom-schedule',
templateUrl: './custom-schedule.component.html',
styleUrls: ['./custom-schedule.component.css']
})
export class CustomScheduleComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
我也有CSS文件是空的。
然后进入app.component.html文件（我的项目的主要组成部分的观点），我有：
<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<app-custom-schedule></app-custom-schedule>
在那里我打电话使用PrimeNG时间表我的自定义组件。
这是app.module.ts文件我的项目：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {CalendarModule, CheckboxModule, DialogModule, ScheduleModule} from 'primeng/primeng';
import {FormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { CustomCalendarComponent } from './custom-calendar/custom-calendar.component';
import { CustomScheduleComponent } from './custom-schedule/custom-schedule.component';
import {HttpModule} from '@angular/http';
import {EventService} from "./custom-schedule/eventservice.service";
@NgModule({
declarations: [
AppComponent,
CustomCalendarComponent,
CustomScheduleComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
CalendarModule,
ScheduleModule,
DialogModule,
HttpModule,
CheckboxModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
的问题是，当我运行我的应用程序获得这些错误信息到浏览器控制台：
VM1164:6 Uncaught ReferenceError: moment is not defined
at eval (eval at webpackJsonp../node_modules/script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:170)
at eval (eval at webpackJsonp../node_modules/script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:178)
at eval (<anonymous>)
at webpackJsonp../node_modules/script-loader/addScript.js.module.exports (addScript.js:9)
at Object../node_modules/script-loader/index.js!./node_modules/fullcalendar/dist/fullcalendar.min.js (fullcalendar.min.js?c6f4:1)
at __webpack_require__ (bootstrap 0ca06893c67582749f01:54)
at Object.2 (scripts.bundle.js:52)
at __webpack_require__ (bootstrap 0ca06893c67582749f01:54)
at webpackJsonpCallback (bootstrap 0ca06893c67582749f01:25)
at scripts.bundle.js:1
(anonymous) @ VM1164:6
(anonymous) @ VM1164:6
webpackJsonp../node_modules/script-loader/addScript.js.module.exports @ addScript.js:9
./node_modules/script-loader/index.js!./node_modules/fullcalendar/dist/fullcalendar.min.js @ fullcalendar.min.js?c6f4:1
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
2 @ scripts.bundle.js:52
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
webpackJsonpCallback @ bootstrap 0ca06893c67582749f01:25
(anonymous) @ scripts.bundle.js:1
CustomScheduleComponent.html:1 ERROR TypeError: this.schedule.fullCalendar is not a function
at Schedule.webpackJsonp../node_modules/primeng/components/schedule/schedule.js.Schedule.initialize (schedule.js:211)
at Schedule.webpackJsonp../node_modules/primeng/components/schedule/schedule.js.Schedule.ngAfterViewChecked (schedule.js:193)
at callProviderLifecycles (core.es5.js:11185)
at callElementProvidersLifecycles (core.es5.js:11157)
at callLifecycleHooksChildrenFirst (core.es5.js:11141)
at checkAndUpdateView (core.es5.js:12246)
at callViewAction (core.es5.js:12603)
at execComponentViewsAction (core.es5.js:12535)
at checkAndUpdateView (core.es5.js:12244)
at callViewAction (core.es5.js:12603)
View_CustomScheduleComponent_0 @ CustomScheduleComponent.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4814
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4814
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_._loadComponent @ core.es5.js:4782
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4770
(anonymous) @ core.es5.js:4546
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
3 @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
webpackJsonpCallback @ bootstrap 0ca06893c67582749f01:25
(anonymous) @ main.bundle.js:1
CustomScheduleComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_CustomScheduleComponent_0 @ CustomScheduleComponent.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4814
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4814
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_._loadComponent @ core.es5.js:4782
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4770
(anonymous) @ core.es5.js:4546
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
3 @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
webpackJsonpCallback @ bootstrap 0ca06893c67582749f01:25
(anonymous) @ main.bundle.js:1
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
CustomScheduleComponent.html:1 ERROR TypeError: this.schedule.fullCalendar is not a function
at Schedule.webpackJsonp../node_modules/primeng/components/schedule/schedule.js.Schedule.initialize (schedule.js:211)
at Schedule.webpackJsonp../node_modules/primeng/components/schedule/schedule.js.Schedule.ngAfterViewChecked (schedule.js:193)
at callProviderLifecycles (core.es5.js:11185)
at callElementProvidersLifecycles (core.es5.js:11157)
at callLifecycleHooksChildrenFirst (core.es5.js:11141)
at checkAndUpdateView (core.es5.js:12246)
at callViewAction (core.es5.js:12603)
at execComponentViewsAction (core.es5.js:12535)
at checkAndUpdateView (core.es5.js:12244)
at callViewAction (core.es5.js:12603)
View_CustomScheduleComponent_0 @ CustomScheduleComponent.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4814
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4814
(anonymous) @ core.es5.js:4684
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821
next @ core.es5.js:4684
schedulerFn @ core.es5.js:3635
webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp../node_modules/rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onHasTask @ core.es5.js:3903
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:444
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:464
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:288
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:208
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
3 @ main.ts:11
__webpack_require__ @ bootstrap 0ca06893c67582749f01:54
webpackJsonpCallback @ bootstrap 0ca06893c67582749f01:25
(anonymous) @ main.bundle.js:1
CustomScheduleComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
那么可能是什么问题？我错过了什么？我怎样才能尝试修复它并获取我的视图中的计划组件？