I'm using SystemJS builder to build an angular 2 application leveraging PrimeNg. The schedule component from PrimeNg depends on fullcalendar. The builder seems to execute without issue, but when I run the application I get this error:
Error: Error in ./ScheduleComponent class ScheduleComponent - inline template:0:5 caused by: this.schedule.fullCalendar is not a function
TypeError: this.schedule.fullCalendar is not a function
In addition to this error, the output bundle contains no references to FullCalendar or moment other than calls coming from primeng.
Here's my setup:
package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angular/router": "~3.2.0",
"@types/node": "0.0.2",
"core-js": "^2.4.1",
"fullcalendar": "^3.1.0",
"primeng": "^1.0.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26"
},
"devDependencies": {
"@types/jquery": "^2.0.34",
"cssmin": "^0.4.3",
"del": "^2.2.2",
"font-awesome": "^4.7.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-cssmin": "^0.1.7",
"gulp-inline-ng2-template": "^4.0.0",
"gulp-sourcemaps": "^1.9.1",
"gulp-tslint": "^7.0.1",
"gulp-typescript": "^3.1.3",
"gulp-typescript-cs-poco": "^1.11.0",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11",
"html-minifier": "^3.2.3",
"systemjs-builder": "^0.15.34",
"tslint": "^4.0.2",
"typescript": "^2.0.10",
"typescript-cs-poco": "^1.11.0"
}
}
SystemJS.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
format: "system",
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': 'Components',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.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/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'jquery': 'npm:jquery',
'rxjs': 'npm:rxjs',
'fullcalendar': 'npm:fullcalendar',
'primeng': 'npm:primeng'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'app': { main: 'main.js', defaultExtension: 'js' },
'jquery': { main: 'dist/jquery.js', defaultExtension: 'js' },
'fullcalendar': { main: 'dist/fullcalendar.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
}
});
})(this);
Any help is appreciated!
I fixed this by adding the following to my main module:
main.ts