0

grid, funciona genial cuando lo implemento en el componente principal que es app-component.html a traves del app.module.ts, sin embargo da este error cuando implemento en otro modulo vehiculos.module.ts donde igual hago esto: import { AgGridModule } from "ag-grid-angular"; en los imports: AgGridModule.withComponents([]) sale este error: Error: src/app/pages/vehiculos/vehiculos.component.html:3:1 - error NG8001: '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. Espero su ayuda, gracias
2
  • Jose, podrías compartir el modulo principal y el modulo de vehiculos? Gracias Commented el 18 ene. 2021 a las 15:31
  • Baja el ng serve y vuelve a compilar. Commented el 18 ene. 2021 a las 18:18

4 respuestas 4

0

Modulo page que llama al modulo de vehiculos:

 import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//nuevos
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//componentes y modulos del sistema del sistema

import { PrincipalComponent } from './principal/principal.component';
import { VehiculosModule } from './vehiculos/vehiculos.module';
//import { AgGridModule } from '@ag-grid-community/angular';
import { AgGridModule } from "ag-grid-angular";
@NgModule({
  declarations: 
  [PrincipalComponent],  
  exports:[
    PrincipalComponent    
  ],
  imports: [       
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    VehiculosModule,
    AgGridModule.withComponents([])
  ]
})
export class PagesModule { }
0

Modulo de vehiculos:

    import { VehiculosComponent } from './vehiculos.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgGridModule } from "ag-grid-angular";
@NgModule({
  declarations: [VehiculosComponent],
  imports: [
    CommonModule,
    // Grid
    AgGridModule.withComponents([])
  ]
})
export class VehiculosModule { }
0

Componente vehiculo:

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

@Component({
  selector: 'app-vehiculos',
  templateUrl: './vehiculos.component.html',
  styles: [
  ]
})

    export class VehiculosComponent implements OnInit {
      title = 'my-app';
    
      columnDefs = [
          { field: 'make' },
          { field: 'model' },
          { field: 'price'}
      ];
      rowData = [
          { make: 'Toyota', model: 'Celica2021', price: 35000 },
          { make: 'Ford', model: 'Mondeo2021', price: 32000 },
          { make: 'Porsche', model: 'Boxter2021', price: 72000 }
      ];
      constructor() { }
    
      ngOnInit(): void {
      }
    }
    

    <p>vehiculos works!</p>
    
    <ag-grid-angular
        style="width: 500px; height: 500px;"
        class="ag-theme-alpine"
        [rowData]="rowData"
        [columnDefs]="columnDefs">
    </ag-grid-angular> 
0

ya se pudo solucionar el problema:

  1. Se instalo los paquetes ag-grid comunity y ag-grid de los siguientes links: https://www.npmjs.com/package/ag-grid-community https://www.npmjs.com/package/ag-grid

  2. Faltaba una importacion en app.module.ts y se utilizo el ag-grid de comunity en el modulo principal:

    import { AgGridModule } from '@ag-grid-community/angular'; imports: [
    AgGridModule.withComponents([])

  3. En el modulo donde se llama al componente que utiliza ag-grid se importo la otra libreria:

    import { AgGridModule } from "ag-grid-angular";

    imports: [ CommonModule, // Grid AgGridModule.withComponents([]) ]

  4. Finalmente en el componente donde se implemento ag-grid se utilizo esta importacion:

    import {Grid, GridOptions} from 'ag-grid/main';

Eso seria la solucion, gracias a Alexis narvaez por su ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.