title: 'ag-grid-angular' is not a known element:
body: <p>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:<br>
  <a href="https://akveo.github.io/ngx-admin/docs/getting-started/installation-guidelines#install-ngxadmin" rel="nofollow noreferrer">ngx-admin</a>
  This is how the template looks like:<br>
  <a href="https://i.stack.imgur.com/Mfjw8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mfjw8.png" alt="enter image description here"></a></p>
  
  <p>I tried to add another page inside extra-components which would contain the grid:<br>
  <a href="https://i.stack.imgur.com/tquVL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tquVL.png" alt="enter image description here"></a>
  But, as you see the template doesn't get rendered.<br>
  This is the extra-components folder inside the project:<br>
  <a href="https://i.stack.imgur.com/EPi33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EPi33.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>action-plan.component.html</p>
  </blockquote>
  
  <pre><code>&lt;!-- I have tested this with a normal  Angular project and it worked perfectly --&gt;
  ahmed
  &lt;ag-grid-angular
  style="width: 100% ; height: 1000px;"
  [rowData]="actionPlanPartiesrowData"
  [columnDefs]="actionPlanPartiescolumnDefs"
  (gridReady)="actionPlanPartiesonGridReady($event)"
  [getRowHeight]="getRowHeight"
  [animateRows]="true"
  [defaultColDef]="defaultColDef"
  (cellValueChanged)="onactionPlanPartiesCellValueChanged($event)"
  &gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <blockquote>
    <p>action-plan.component.ts</p>
  </blockquote>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <blockquote>
    <p>extra-components.module.ts</p>
  </blockquote>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>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:<br>
  <a href="https://i.stack.imgur.com/xkbPr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xkbPr.png" alt="enter image description here"></a> 
  Here's what appears in VSCode:  </p>
  
  <blockquote>
    <p>'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</p>
  </blockquote>