'ag-grid-angular' is not a known element:

Question

I have been using ag-grid for a couple of months. Today, I tried to integrate a grid I have successfully built in a previous project in this Angular template:
ngx-admin This is how the template looks like:

I tried to add another page inside extra-components which would contain the grid:
But, as you see the template doesn't get rendered.
This is the extra-components folder inside the project:

action-plan.component.html

<!-- I have tested this with a normal  Angular project and it worked perfectly -->
ahmed
<ag-grid-angular
style="width: 100% ; height: 1000px;"
[rowData]="actionPlanPartiesrowData"
[columnDefs]="actionPlanPartiescolumnDefs"
(gridReady)="actionPlanPartiesonGridReady($event)"
[getRowHeight]="getRowHeight"
[animateRows]="true"
[defaultColDef]="defaultColDef"
(cellValueChanged)="onactionPlanPartiesCellValueChanged($event)"
>
</ag-grid-angular>

action-plan.component.ts

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

@Component({
  selector: "app-action-plan",
  templateUrl: "./action-plan.component.html",
  styleUrls: ["./action-plan.component.css"]
})
export class ActionPlanComponent implements OnInit {
  private actionPlangridApi;
  actionPlanPartiescolumnDefs = [
    {
      headerName: "Id",
      field: "id",
      editable: true,
      width: 100
    },
    {
      headerName: "Project",
      field: "project",
      editable: true,
      width: 400
    },
    {
      headerName: "Risk ID",
      field: "riskId",
      editable: true,
      width: 300
    },
    {
      headerName: "ISO 27001",
      field: "iso27001",
      editable: true,
      width: 150
    },
    {
      headerName: "Priority",
      field: "priority",
      editable: true,
      width: 150
    },
    {
      headerName: "Project Owner",
      field: "projectOwner",
      editable: true,
      width: 150
    },
    {
      headerName: "Estimated Cost",
      field: "estimatedCost",
      editable: true,
      width: 150
    }
  ];
  actionPlanPartiesrowData = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
  defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true
  };
  ngOnInit() {}
  constructor() {}
  actionPlanPartiesonGridReady(params) {
  }
  onactionPlanPartiesCellValueChanged(params) {
  }

  public getRowHeight(params) {
    return 130;
  }
}

extra-components.module.ts

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

import { TreeModule } from 'angular-tree-component';
import { ToasterModule } from 'angular2-toaster';

import { ThemeModule } from '../../@theme/theme.module';
import { ExtraComponentsRoutingModule } from './extra-components-routing.module';

// components
import { ExtraComponentsComponent } from './extra-components.component';
import { TreeComponent } from './tree/tree.component';
import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component';
import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component';
import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component';
import { SpinnerColorComponent } from './spinner/spinner-color/spinner-color.component';
import { SpinnerComponent } from './spinner/spinner.component';
import {
  InteractiveProgressBarComponent,
} from './progress-bar/interactive-progress-bar/interactive-progress-bar.component';
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { AlertComponent } from './alert/alert.component';
import { ChatComponent } from './chat/chat.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { CalendarComponent } from './calendar/calendar.component';
import { DayCellComponent } from './calendar/day-cell/day-cell.component';
import { StepperComponent } from './stepper/stepper.component';
import { ListComponent } from './list/list.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component';
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';

// service
import { NewsService } from './services/news.service';

import { ActionPlanComponent } from './ahmed/action-plan.component';
import { AgGridModule } from 'ag-grid-angular';

const COMPONENTS = [
  ExtraComponentsComponent,
  TreeComponent,
  AlertComponent,
  ProgressBarComponent,
  InteractiveProgressBarComponent,
  SpinnerComponent,
  SpinnerColorComponent,
  SpinnerSizesComponent,
  SpinnerInButtonsComponent,
  SpinnerInTabsComponent,
  CalendarComponent,
  DayCellComponent,
  ChatComponent,
  TabsComponent,
  Tab1Component,
  Tab2Component,
  StepperComponent,
  ListComponent,
  InfiniteListComponent,
  NewsPostComponent,
  NewsPostPlaceholderComponent,
  AccordionComponent,
  NebularFormInputsComponent,
  NebularSelectComponent,
  CalendarKitFullCalendarShowcaseComponent,
  CalendarKitMonthCellComponent,
  ActionPlanComponent
];

const SERVICES = [
  NewsService,
];

const MODULES = [


];

@NgModule({
  imports: [
    ThemeModule,
    ExtraComponentsRoutingModule,
    TreeModule,
    ToasterModule.forRoot(),
    AgGridModule.withComponents([

    ])
  ],
  declarations: [
    ...COMPONENTS,
  ],
  providers: [
    ...SERVICES,
  ],
})
export class ExtraComponentsModule { }

Others have faced the same issue as me, but the solution provided is by importing ag-grid-angular to app.module.ts which I did. But, it didn't solve the problem. (in my case extra-components.module.ts) There are other module.ts files in the project in higher level folders in which I also imported the ag-grid-angular module just in case:
Here's what appears in VSCode:

'ag-grid-angular' is not a known element: 1. If 'ag-grid-angular' is an Angular component, then verify that it is part of this module. 2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular Can't bind to 'getRowHeight' since it isn't a known property of 'ag-grid-angular'. 1. If 'ag-grid-angular' is an Angular component and it has 'getRowHeight' input, then verify that it is part of this module. 2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.Angular

did you run npm install from the console and make sure it succeeded without error? — DanGo
@DanGorman I did that as soon as I downloaded the template. For ag-grid I installed it using npm install --save ag-grid-angular and it was succesfully installed I believe . Let me recheck — AG_HIHI
@DanGorman Even though I have run npm install --save ag-grid-angular ag-grid-community the two modules aren't found inside node_modules, any idea why? — AG_HIHI
Is the package listed as a dependency in the package.json file? — DanGo
I understand how you got to this point. What you are doing is normal for someone learning, but prone to error. There should be a file called package.json it should list all of the packages that your project needs to run. It should have added the package to the list when you ran the npm install earlier. can you add the contents of that file to your post? — DanGo

Mecarito Mecarito · Accepted Answer · 2020-05-11T14:16:08

That is just a small fix, import BrowserAnimationsModule and FormsModule and will solve the issue, that is if you have followed the procedures at https://www.ag-grid.com/angular-grid/#add-ag-grid-to-your-project

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

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

'ag-grid-angular' is not a known element:

2 Answers