Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule'

Question

Getting this new error out of nowhere as soon as I added ng2-eonasdan-datetimepicker. Maybe this is the wrong file contents, but I can't narrow it down.

It says there is something wrong with this line in my index file:

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

here's my app.module.ts: When I comment out the "ng2-eonasdan-datetimepicker" import lines it works...

//Modules
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';


import { AppComponent }   from './app.component';


import { DashboardComponent } from './dashboard/dashboard.component';
import { JobListComponent } from './jobs/job-list.component';
import { TESTpg1 }   from './test/TESTpg1.component';
import { TESTpg2 }   from './test/TESTpg2.component';
import { ErrorComponent } from './error/error.component';
import { JobDetailsComponent } from './jobs/job-details.component';
import { CreateJobComponent } from './jobs/create-job.component';
import { gMap } from './maps/gmap.component';
import { DayScheduleComponent } from './calendar/day-schedule.component';

//Router List
import { appRoutes } from './app.routes';

//FireBase
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from './data/firebase.config';

//DateTimePicker
import { A2Edatetimepicker, DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker';
import { DateTimePicker } from './calendar/dateTimePicker.component';

@NgModule({
  imports:      [ MaterialModule.forRoot(),
                  BrowserModule,
                  RouterModule.forRoot(appRoutes),
                  FormsModule,
                  ReactiveFormsModule,
                  HttpModule,
                  JsonpModule,
                  AngularFireModule.initializeApp(firebaseConfig),
                  A2Edatetimepicker
                ],
  declarations: [ AppComponent,
                  DashboardComponent,
                  JobListComponent,
                  JobDetailsComponent,
                  TESTpg1,
                  TESTpg2,
                  ErrorComponent,
                  gMap,
                  CreateJobComponent,
                  DayScheduleComponent,
                  DateTimePicker,
                  DateTimePickerDirective
                ],
  bootstrap:    [ AppComponent ],
  providers:    [ ]
})
export class AppModule {}

Error:

Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule'
    Error: Unexpected value 'undefined' imported by the module 'AppModule'
        at SyntaxError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29)
        at new SyntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18)
        at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:18126:42)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:18105:51)
        at JitCompiler._loadModules (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27288:66)
        at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27248:54)
        at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27214:23)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8496:29)
        at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8471:25)
    Error loading http://localhost:3000/app/js/main.js
        at SyntaxError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29)
        at new SyntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18)
        at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:18126:42)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:18105:51)
        at JitCompiler._loadModules (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27288:66)
        at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27248:54)
        at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27214:23)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8496:29)
        at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8471:25)
    Error loading http://localhost:3000/app/js/main.js

systemjs:

  'jquery': 'npm:jquery/dist/jquery.js',
  'moment': 'npm:moment/moment.js',
  'eonasdan-bootstrap-datetimepicker': 'npm:eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
  'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js'

UPDATE:

I removed the references to A2Edatetimepicker and the error went away! The reason I had A2Edatetimepicker at all was because I get red squiggly lines under DateTimeDirective, but not A2EdateTimeDirective so I thought it was a newer name for the module or something. BUT now I'm back to THIS PROBLEM because of this.....

Update 2: FIXED!

Followed the steps below and then....

Changed SystemJS:

'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker'

app.module.ts:

import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/dist/datetimepicker.directive';

@NgModule({
    declarations: [ DateTimePickerDirective ]
})

It works! :D Thank you so much!!!

Answer 1

In order to use ng2-eonasdan-datetimepicker, your application requires a few things.

1. install via npm with npm install ng2-eonasdan-datetimepicker --save
2. import {DateTimePickerDirective} from 'ng2-eonasdan-datetimepicker'; into your app.module
3. add to your declarations declarations: [ App, DateTimePickerDirective ]
4. you must import Jquery
5. you must import moment
6. and lastly you may have to map you application to the location... 'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js',

here is my plunker with the proper installation and mappings of the import https://plnkr.co/edit/lYHLHhPsU7o5z3CEeerQ?p=preview

also here is the officail doc for importing https://www.npmjs.com/package/ng2-eonasdan-datetimepicker

Edit: Focus on the config.js in the plunker

 'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js',
    'jquery': 'npm:jquery@2.2.4',
    'moment': 'npm:moment',

EDIT...AGAIN

hover over your red squigly error. Read the path name provide from DateTimePickerDirective, now look at the last part of the path name, you are probably looking at dist/datetimepicker.MODULE you need to remap it to look at datetimepicker.DIRECTIVE

Final Edit ok so here is the final break down of everything.... ng2-eonasdan-datetimepicker is broken down into two items. it has a MODULE and a Directive, here is the node_module/ng2-eonasdan-datetimepicker/dist file for proof...

by default it point to the MODULE in order to change it you need to open ng2-eonasdan-datetimepicker package.json and change it to point to the Directive...

so Navigate to node_modules/ng2-eonasdan-datetimepicker/package.json change lines 92 and 111 from "dist/datetimepicker.module.js" to "dist/datetimepicker.directive.js" and "dist/datetimepicker.module.d.ts" to "dist/datetimepicker.directive.d.ts". Then remove your your import from your project and re-import it for it to pick up the change, restart your app and it should work.