下面我将介绍我的运行方式,但我没有使用ag-grid-ng2.我不知道在angular-cli.json中引用ag-grid-ng2的位置.

我想逐步使用这样的东西：

我正在使用：

>节点：6.9.2
> NPM：4.0.5
>打字稿：2.1.4
> Angular CLI：1.0.0-beta.22-1
> Ag-Grid：7.0.2

我使用以下命令启动项目,并没有更改任何内容,除了下面将要描述的内容：

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

然后我编辑了文件’angular-cli.json’：

"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"
],

文件：app.component.html

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

<div  id="grid-test">
</div>

文件：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-test');
    new Grid(<HTMLdivelement>el,this.gridOptions);

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

}

谢谢.

> Ag Grid – Building with Angular CLI
> Ag Grid Angular Example

管道代码是：

import { Pipe,PipeTransform } from "@angular/core";
import { DatePipe,JsonPipe } from "@angular/common";

@Pipe({name: 'dataTableFormat'})
export class DataTablePipe implements PipeTransform {

  // values with type 'json' are parsed to json. As a result,string values may be displayed with quotes ("<string>").
  // To avoid that,we remove these quotes with this regex
  private quotesExp: RegExp = /^\"|\"$/gi;

  constructor(private datePipe: DatePipe,private jsonPipe: JsonPipe) {
  }

  transform(value: string,type: string): string {
    switch (type) {
        case "date":
            return this.datePipe.transform(value,'short');
        case "json":
            return this.jsonPipe.transform(value).replace(this.quotesExp,"");
        default:
            return value;
    }
  }
}

和规范代码是：

import {Testbed} from "@angular/core/testing";
import {DataTablePipe} from "./data-table.pipe";
import {DatePipe,JsonPipe} from "@angular/common";

describe('DataTableFormat',() => {

    beforeEach(() => {
        Testbed.configureTestingModule({
            declarations: [ DataTablePipe ],providers: [
                DatePipe,JsonPipe
            ]
        });
    });

    it('sanity',() => {
        expect(true).toBeTruthy();
    });

    it('should transform ',() => {
        let fixture = Testbed.createComponent(DataTablePipe);
        let comp = fixture.componentInstance;
        let testDate:Date = new Date();
        let datePipe = fixture.debugElement.injector.get(DatePipe);

        expect(comp.transform(testDate.toString(),'date')).toBe(datePipe.transform(testDate));

    });
});

完整性测试通过,但真正的测试失败并出现错误：

Error: Cannot create the component DataTablePipe as it was not imported into the testing module!
    at Testbed.createComponent (webpack:///Users/sninio/dev/csp-ui-ng/~/@angular/core/bundles/core-testing.umd.js:1144:0 <- src/main/js/test.ts:6022:23)
    at Function.Testbed.createComponent (webpack:///Users/sninio/dev/csp-ui-ng/~/@angular/core/bundles/core-testing.umd.js:972:0 <- src/main/js/test.ts:5850:33)
    at Object.<anonymous> (webpack:///Users/sninio/dev/csp-ui-ng/src/main/js/app/pages/+platform/events/data-table/data-table.pipe.spec.ts:23:30 <- src/main/js/test.ts:14770:41)
    at ZoneDelegate.invoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:203:0 <- src/main/js/test.ts:26741:28)
    at ProxyZonespec.onInvoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/proxy.js:72:0 <- src/main/js/test.ts:18285:39)
    at ZoneDelegate.invoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:26740:34)
    at Zone.run (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:26634:43)
    at Object.<anonymous> (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/jasmine-patch.js:91:27 <- src/main/js/test.ts:18021:50)

我确定这是我错过的一些配置,但由于某种原因,DataTablePipe没有导入测试模块……

有任何想法吗？

import { inject } from '@angular/core/testing';

it('should transform ',inject([DatePipe,JsonPipe],(datePipe,jsonPipe) => {
  let pipe = new DataTablePipe(datePipe,jsonPipe);
  let testDate: Date = new Date();

  expect(pipe.transform(testDate.toString(),'date'))
      .toBe(datePipe.transform(testDate,'short'));
}));