ngModule 中的模块“AppModule”错误导入的意外值“未定义”？

Question

我正在使用 ngModule 对导入和其他依赖项进行分组。我正在使用 ag 网格作为数据网格。下面是我的 app.module.ts -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SecurityContextService} from './securitycontext.service';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';
import {AgGridModule} from 'ag-grid-ng2/main';
import {HeaderComponent} from './app.header';
@NgModule({
  imports: [ BrowserModule,HttpModule,AgGridModule],
  declarations: [ AppComponent,HeaderComponent],
  providers: [  SecurityContextService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我遇到了下面提到的异常。

模块“AppModule”导入的意外值“未定义”

下面是异常的堆栈跟踪 -

错误：错误：模块导入的意外值“未定义” 新 BaseException 处的“AppModule” (http://localhost:8000/lib/@angular/compiler/src/facade/exceptions.js:27:23) 在评估 (http://localhost:8000/lib/@angular/compiler/src/metadata_resolver.js:255:31) 在 Array.forEach (native) 在 CompileMetadataResolver.getNgModuleMetadata (http://localhost:8000/lib/@angular/compiler/src/metadata_resolver.js:239:44) 在 RuntimeCompiler._compileComponents (http://localhost:8000/lib/@angular/compiler/src/runtime_compiler.js:150:47) 在 RuntimeCompiler._compileModuleAndComponents (http://localhost:8000/lib/@angular/compiler/src/runtime_compiler.js:72:37) 在 RuntimeCompiler.compileModuleAsync (http://localhost:8000/lib/@angular/compiler/src/runtime_compiler.js:49:21) 在 PlatformRef__._bootstrapModuleWithZone (http://localhost:8000/lib/@angular/core/src/application_ref.js:368:25) 在 PlatformRef_.bootstrapModule (http://localhost:8000/lib/@angular/core/src/application_ref.js:361:21) 执行时 (http://localhost:8000/app/main.js:16:65) 加载错误 http://localhost:8000/app/main.js

注意：仅当我在导入中使用 AgGridModule 时才会出现此异常。

我正在使用 gulp 构建我的应用程序。

编辑

下面是 Systemjs.config -

// map tells the System loader where to look for things
var map = {
    'app': 'app', // 'dist',
    'rxjs': 'lib/rxjs',
    '@angular': 'lib/@angular',
    'ag-grid-ng2': 'lib/ag-grid-ng2',
    'ag-grid-enterprise': 'lib/ag-grid-enterprise',
    'ag-grid': 'lib/ag-grid',
     '@angular/router':  'lib/@angular/router',
     'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': {main: 'main.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'},
     'ag-grid-ng2': {
        defaultExtension: "js"
    },
    'ag-grid': {
        defaultExtension: "js"
    },
    'ag-grid-enterprise': {
        defaultExtension: "js"
    },
    'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
    '@angular/forms'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
    packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});

var config = {
    map: map,
    packages: packages
};

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
    global.filterSystemConfig(config);
}

System.config(config);

Answer 1

我不完全确定这是否会解决您的问题，但如果您将 ng2 与 ag-grid 一起使用，那么您需要按如下方式拉入 AgGridModule：

@NgModule({
imports: [
    BrowserModule,
    AgGridModule.forRoot(),
    ...
})

forRoot 位的存在是为了让客户端不必在根级别声明模块。