Ag-grid with Angular2 using angular-cli

Question

I am trying to run ag-grid with angular2, the examples you have on the ag-grid website are using Systemjs as Builder, and the new angular-cli uses webpack.

Below I’ll put the way I managed to run, but the way below I’m not using ag-grid-ng2. 'Cause I don’t know where to reference the extra ag-grid-ng2 library.

I wanted to use something like this step-by-step: https://www.ag-grid.com/best-angular-2-data-grid/

I’m using:

• Node: 6.9.2
• NPM: 4.0.5
• Typescript: 2.1.4
• Angular CLI: 1.0.0-beta.22-1
• Ag-Grid: 7.0.2

I used the following commands to start the project, and did not change anything except what will be described below:

ng new MeuProjeto
cd MeuProjeto
npm install --save ag-grid
npm install --save ag-grid-ng2

Then I edited the 'angular-cli.json file':

"styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/theme-blue.css",
    "styles.css"
],
"scripts": [
    "../node_modules/ag-grid/dist/ag-grid.js"
],

File: app.component.html

<h1>
  {{title}}
</h1>

<div  id="grid-teste"
      style="height: 250px;" 
      class="ag-blue">
</div>

File: app.component.ts

import { Component, OnInit } from '@angular/core';

import { Grid, GridOptions } from "ag-grid/main";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app works!';
  gridOptions: GridOptions;

  constructor() {   
  }

  ngOnInit() {

    this.gridOptions = <GridOptions>{};
    this.gridOptions.columnDefs = [];
    this.gridOptions.columnDefs.push({ headerName: 'name', field: 'name' });

    var el = document.querySelector('#grid-teste');
    new Grid(<HTMLDivElement>el, this.gridOptions);

    let data: any[] = [];
    data.push({name: 'Nome 1'});
    data.push({name: 'Nome 2'});
    data.push({name: 'Nome 3'});
    this.gridOptions.api.setRowData(data);
  }

}

Thank you.