title: angular2 fullcalendar not working
body: <p>Hello i am using fullcalendar with my angular2 project.But i am not able to properly display the calendar itself.There is no error shown in the console but the calendar and events doesnt display. this is what it is displaying as of now
  <a href="https://i.stack.imgur.com/hLm41.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hLm41.png" alt="enter image description here"></a></p>
  
  <p>Here are my codes.Please let me know if i need to attach any more files</p>
  
  <p>angular.cli.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "calendar"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.css",
          "../node_modules/fullcalendar/dist/fullcalendar.min.css"
          
        ],
        "scripts": [
          "../node_modules/jquery/jquery.js",
          "../node_modules/ap-angular2-fullcalendar/angular2-fullcalendar.js",
          "../node_modules/moment/moment.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "css",
      "component": {}
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import {CalendarComponent} from 'ap-angular2-fullcalendar/src/calendar/calendar'
  
  
  @NgModule({
    declarations: [
      AppComponent,
      CalendarComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    
    calendarOptions:Object = {
          height: 'parent',
          fixedWeekCount : false,
          defaultDate: '2016-09-12',
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: [
            {
              title: 'All Day Event',
              start: '2016-09-01'
            },
            {
              title: 'Long Event',
              start: '2016-09-07',
              end: '2016-09-10'
            },
            {
              id: 999,
              title: 'Repeating Event',
              start: '2016-09-09T16:00:00'
            },
            {
              id: 999,
              title: 'Repeating Event',
              start: '2016-09-16T16:00:00'
            },
            {
              title: 'Conference',
              start: '2016-09-11',
              end: '2016-09-13'
            },
            {
              title: 'Meeting',
              start: '2016-09-12T10:30:00',
              end: '2016-09-12T12:30:00'
            },
            {
              title: 'Lunch',
              start: '2016-09-12T12:00:00'
            },
            {
              title: 'Meeting',
              start: '2016-09-12T14:30:00'
            },
            {
              title: 'Happy Hour',
              start: '2016-09-12T17:30:00'
            },
            {
              title: 'Dinner',
              start: '2016-09-12T20:00:00'
            },
            {
              title: 'Birthday Party',
              start: '2016-09-13T07:00:00'
            },
            {
              title: 'Click for Google',
              url: 'http://google.com/',
              start: '2016-09-28'
            }
          ]
        };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;angular2-fullcalendar [options]="calendarOptions"&gt;&lt;/angular2-fullcalendar&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help.I am stuck.Any help would be appreciated.Thank you</p>
  
  <blockquote>
    <p>Update 1,Now it is not working only on restarting the machine.The console says its not finding CalendarComponent in the specified directory</p>
  </blockquote>