'ag-grid-angular' 不是已知元素：

Question

我已经使用 ag-grid 几个月了。今天，我尝试在这个Angular模板中集成我在之前项目中成功构建的网格：
ngx-admin 模板如下所示：

我尝试在包含网格的额外组件中添加另一个页面：
但是，正如您所见，模板没有被渲染。
这是项目内的 extra-components 文件夹：

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 { }

其他人也面临与我相同的问题，但提供的解决方案是将 ag-grid-angular 导入到 app.module.ts 中，我这样做了。但是，它并没有解决问题。 （在我的情况下，extra-components.module.ts） 项目中还有其他 module.ts 文件位于更高级别的文件夹中，我还在其中导入了 ag-grid-angular 模块以防万一：
以下是 VSCode 中出现的内容：

'ag-grid-angular' 不是已知元素： 1. 如果 'ag-grid-angular' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“ag-grid-angular”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。Angular 无法绑定到“getRowHeight”，因为它 不是“ag-grid-angular”的已知属性。 1. 如果 'ag-grid-angular' 是一个 Angular 组件并且它有 'getRowHeight' 输入，那么验证它是这个模块的一部分。 2. 如果“ag-grid-angular”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 压制此消息。 3.要允许任何属性添加'NO_ERRORS_SCHEMA'到这个组件的'@NgModule.schemas'。Angular

Answer 1

这只是一个小修复，导入 BrowserAnimationsModule 和 FormsModule 即可解决问题，前提是您已按照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 { }

Answer 2

在我的情况下，问题在于 tsconfig.json 中的类型数组。

我在 jest 的帮助下进行单元测试，其中类型为 jest。

当我在该数组中添加节点时，它开始接受 ag-grid-angular 元素。

在修复 tsconfig.json 文件之前：-

"types": ["jest"]

修复后：-

"types": ["node","jest"]