Question

一旦我添加了ng2-eonasdan-datetimepicker，就会突然出现这个新错误。也许这是错误的文件内容，但我不能缩小它。

它说我的索引文件中的这行有问题：

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

这是我的app.module.ts：当我注释掉＆＃34; ng2-eonasdan-datetimepicker＆＃34;导入它的工作线......

//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: (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'

更新：

我删除了对A2Edatetimepicker的引用，错误消失了！我之所以有A2Edatetimepicker的原因是因为我在DateTimeDirective下获得了红色波浪线，但没有A2EdateTimeDirective，所以我认为这是模块的新名称或其他东西。但是现在我因为这个而回到THIS PROBLEM ......

更新2：固定！

按照以下步骤进行操作....

更改了SystemJS：

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

app.module.ts：

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

@NgModule({
    declarations: [ DateTimePickerDirective ]
})

有效！：d 非常感谢你!!!

Answer 1

为了使用ng2-eonasdan-datetimepicker，您的应用程序需要一些东西。

使用npm install ng2-eonasdan-datetimepicker --save
import {DateTimePickerDirective} from 'ng2-eonasdan-datetimepicker';进入你的app.module
添加到您的声明declarations: [ App, DateTimePickerDirective ]
您必须导入Jquery
您必须导入moment
最后您可能需要将应用程序映射到该位置... 'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js',

这是我的plunker正确安装和导入https://plnkr.co/edit/lYHLHhPsU7o5z3CEeerQ?p=preview

这里也是导入https://www.npmjs.com/package/ng2-eonasdan-datetimepicker

修改专注于plunker中的config.js

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

修改... AGAIN

将鼠标悬停在你的红色错误上。阅读DateTimePickerDirective提供的路径名，现在查看路径名的最后一部分，您可能正在查看dist / datetimepicker。 MODULE 您需要将其重新映射以查看datetimepicker。 <强>指令

最终修改 好的，所以这里是最后的一切...... ng2-eonasdan-datetimepicker分为两个部分。它有一个MODULE和一个指令，这里是node_module / ng2-eonasdan-datetimepicker / dist文件，用于证明......

默认情况下，它指向MODULE以便更改它，您需要打开ng2-eonasdan-datetimepicker package.json并将其更改为指向指令......

所以导航到node_modules / ng2-eonasdan-datetimepicker / package.json将第92行和第111行从“dist / datetimepicker.module.js”更改为“dist / datetimepicker.directive.js”和“dist / datetimepicker.module”。 d.ts“to”dist / datetimepicker.directive.d.ts“。然后从您的项目中删除您的导入并重新导入它以获取更改，重新启动您的应用程序，它应该可以正常工作。

错误：（SystemJS）意外的值＆＃39; undefined＆＃39;由模块导入的AppModule＆＃39;

1 个答案: