SystemJS Builder not including FullCalendar in bundle

Question

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!

Answer 1

I fixed this by adding the following to my main module:

main.ts

import 'fullcalendar'