ag-grid - サンプルの ag-grid の例をコピーし、セルを重ねてレンダリングします。

Question

私はag-gridを試していて、いくつかの非常に単純な例を機能させようとしています. これまでのところ、私はあまり運がありません。

を使用して新しいアプリを作成し、これらの指示ng new gridTestに従おうとしました。

私が作成したサンプルサイトはこちらです。

結果のグリッドは次のようになります。

app.component.html:

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

app.component.ts:

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

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

  public rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]

  public columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ]
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AgGridModule } from 'ag-grid-angular/main';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

私は何を間違っていますか？この非常に単純な例では、スタイルなどをどのように台無しにしたのかわかりません...