AGGrid - Angular2 - Object doesn't support property or method 'map'. SystemJS

648 Views Asked by At

When trying to simply include the AG-grid Module into a codebase, I'm getting the error "(SystemJS) Object doesn't support property or method 'map'". Is there something else which needs to be included? The AGGrid documentation for Angular2 doesn't seem to mention this. Here's some relevant code snippets. I think AG grid / AG Grid 2 is installed correctly - did it from npm install and it's included in the dependencies.

Systemjs.config.js

        '@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',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

        // ag libraries
        'ag-grid-ng2' : 'node_modules/ag-grid-ng2',
        'ag-grid' : 'node_modules/ag-grid', 

...

'ag-grid-ng2': {
            defaultExtension: "js"
        },
        'ag-grid': {
            defaultExtension: "js"
        }

app.module.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import './shared/rxjs-extensions';
import { HomeModule } from './home/home.module';
import { ProjectsModule } from './projects/projects.module';
import { OperationsModule } from './operations/operations.module';
import { AppRoutingModule, routableComponents } from './app-routing.module';
import { SharedModule } from './Shared/shared.module';
import { AgGridModule } from 'ag-grid-ng2/main';
import { Constants } from './Services/constants';
import { Configuration } from './Services/configuration';
import { ModalModule } from './Shared/modal/modal.module';

...

@NgModule({
    imports: [BrowserModule,
    HttpModule,
    SharedModule,
    FormsModule,
    HomeModule,
    ProjectsModule,
    OperationsModule,
    AppRoutingModule,
    ModalModule,
    AgGridModule.withComponents([])],
declarations: [AppComponent, routableComponents],
bootstrap: [AppComponent],
providers: [Constants, Configuration]

})

So, what am I missing here??

1

There are 1 best solutions below

0
On

Turns out that the issue was that I was using an older version of Angular2. By upgrading to 2.4.x. things started to work.