嗨，我是 Angular 的新手，正在尝试使用 MEAN stack。MEAN 设置我安装成功并且工作正常。我尝试在我的项目中使用角度日历。我安装了角度日历所需的库，但显示如下error：
TypeError: undefined is not a function ('...Rx_1.map...' 附近)
我错过了什么，请指导我错过什么。
我的 systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
// other libraries
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'angular-calendar': 'npm:angular-calendar/bundles/angular-calendar.umd.js',
'calendar-utils': 'npm:calendar-utils/dist/umd/calendar-utils.js',
'angular-resizable-element': 'npm:angular-resizable-element/bundles/angular-resizable-element.umd.js',
'angular-draggable-droppable': 'npm:angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js',
'date-fns': 'npm:date-fns',
'positioning': 'npm:positioning/dist/umd/positioning.js',
'@ng-bootstrap': 'npm:@ng-bootstrap',
'@ng-bootstrap/ng-bootstrap':'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
// other libraries
'rxjs': 'npm:rxjs',
'tslib': 'npm:tslib/tslib.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'date-fns': {
main: './index.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js',
main: 'Rx.js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'date-fns': {
main: './index.js',
defaultExtension: 'js'
},
}
});
})(this);
我的 home.component.ts
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { User } from '../_models/index';
import { UserService } from '../_services/index';
import { CalendarEvent } from 'angular-calendar';
import { Observable} from 'rxjs'
import { merge } from 'rxjs/observable/merge';
import { map } from 'rxjs/operators'
import {
isSameMonth,
isSameDay,
startOfMonth,
endOfMonth,
startOfWeek,
endOfWeek,
startOfDay,
endOfDay,
format
} from 'date-fns';
import { colors } from '../demo-utils/colors';
interface Film {
id: number;
title: string;
release_date: string;
}
@Component({
moduleId: module.id,
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit {
currentUser: User;
users: User[] = [];
constructor(private userService: UserService, private http: HttpClient) {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}
ngOnInit() {
this.loadAllUsers();
this.fetchEvents();
}
deleteUser(_id: string) {
this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
}
private loadAllUsers() {
this.userService.getAll().subscribe(users => { this.users = users; });
}
view: string = 'month';
viewDate: Date = new Date();
events$: Observable<Array<CalendarEvent<{ film: Film }>>>;
activeDayIsOpen: boolean = false;
fetchEvents(): void {
const getStart: any = {
month: startOfMonth,
week: startOfWeek,
day: startOfDay
}[this.view];
const getEnd: any = {
month: endOfMonth,
week: endOfWeek,
day: endOfDay
}[this.view];
const params = new HttpParams()
.set(
'primary_release_date.gte',
format(getStart(this.viewDate), 'YYYY-MM-DD')
)
.set(
'primary_release_date.lte',
format(getEnd(this.viewDate), 'YYYY-MM-DD')
)
.set('api_key', '0ec33936a68018857d727958dca1424f');
this.events$ = this.http
.get('https://api.themoviedb.org/3/discover/movie', { params })
.pipe(
map(({ results }: { results: Film[] }) => {
return results.map((film: Film) => {
return {
title: film.title,
start: new Date(film.release_date),
color: colors.yellow,
meta: {
film
}
};
});
})
);
}
dayClicked({
date,
events
}: {
date: Date;
events: Array<CalendarEvent<{ film: Film }>>;
}): void {
if (isSameMonth(date, this.viewDate)) {
if (
(isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
events.length === 0
) {
this.activeDayIsOpen = false;
} else {
this.activeDayIsOpen = true;
this.viewDate = date;
}
}
}
eventClicked(event: CalendarEvent<{ film: Film }>): void {
window.open(
`https://www.themoviedb.org/movie/${event.meta.film.id}`,
'_blank'
);
}
}
我试图搜索如何解决此错误，但我没有得到正确的解决方案。请建议我如何解决这个问题。提前致谢。