1

Hola comunidad tengo un problema y llevo días investigando y no puedo solucionarlo, ojala puedan ayudarme. Estoy usando componentes hijos en una interfaz de administración, el problema es al querer usar angular material, no lo reconoce mi componente, aunque ya lo importe en su modulo correspondiente, dejo evidencia.

introducir la descripción de la imagen aquí

En los componentes que no son hijos si se reconoce angular material. Alguien sabe como solucionar este problema ???

1
  • 1
    Bienvenido @David! Con solo esa información va a ser difícil poder ayudarte. Podrías añadir en alguna plataforma online tu código (al menos una estructura básica) para poder ver con mayor detalle tu aplicación e intentar ayudarte. Yo uso stackblitz, pero vale cualquiera con la que puedas crear un proyecto angular. Puedes editar la pregunta todas las veces que necesites y añadir más información. Gracias!
    – msalinas
    Commented el 28 ene. 2022 a las 19:50

1 respuesta 1

0

Como te mencionaron dificil precisar el problema al no tener tu codigo ni tu confIguracion Sin embargo si la estructura es solida si esta bien configurada y como me intereso por ngx-datatable la cual nunca habia usado te muestro una configuracion que no trae problemas

Probe una aplicacion que tenga Angular Material Icon+"@swimlane/ngx-datatable": "^20.0.0", En una estructura padre hijo y con esta configuracion no hay problemas

// angular.json
"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
              "src/styles.css"
            ],
No importar en /* styles.scss /-->@import '~@swimlane/ngx-datatable/themes/material.scss';*

Padre

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

import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';
import { LinksComponent } from './about/links/links.component';
import { InfoComponent } from './about/info/info.component';
import {MatIconModule} from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
  declarations: [
    AboutComponent,
    LinksComponent,
    InfoComponent
  ],
  imports: [
    CommonModule,
   // FormsModule,
    //MatFormFieldModule,
 
    MatIconModule,
    NgxDatatableModule,
    AboutRoutingModule
  ]
})
export class AboutModule { }
about-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { InfoComponent } from './about/info/info.component';
import { LinksComponent } from './about/links/links.component';

const routes: Routes = [
  {
    path: '',
    component: AboutComponent,
    children: [
      {
        path: 'links',
        component: LinksComponent
      },
      {
        path: 'info',
        component: InfoComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AboutRoutingModule { }
about-routing.module

// package.json
{
  "name": "ng-zone",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.13",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@swimlane/ngx-datatable": "^20.0.0",
    "express": "^4.17.2",
    "rxjs": "~6.6.0",
    "sse.js": "^0.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.2",
    "@angular/cli": "~12.2.2",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

uno de los hijos info.component.html

<p>info works!</p>
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
index.html debe contener

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Tambien agregue codigo para la tabla en componente padre podes ver el codigo completo en github en github ruta about que reconoce a mat-icon y a la tabla me intereso porque no habia probado a ngx-datatable por lo cual en github para ngx-datatable use un codigo de apuntes el cual debo actualizar pero comprueba que Angular reconoce tanto a Angular material como a ngx-datatable en la estructura Otro problema que puede darse es si usate iconos personalizados mal configurados tenes este tutorial si es el caso aunque no creo ya que no deberian mostrarse en ningun componente iconos personalizados

2
  • Muchísimas gracias @nestdan, me ayudaste mucho con esta solución y efectivamente la estructura que tenia en mi app-routing.module.ts esta mal, lo cambie a tu estructura y ya reconoce material. te agradezco nuevamente tu apoyo.
    – David
    Commented el 31 ene. 2022 a las 20:36
  • Si debia ser algun motivo de ese tipo por eso conteste con una estructura para mi adecuada Si consideras que la respuesta es adecuada recorda seleccionarla como tal asi se da por cerrada la busqueda saludos
    – nestdan
    Commented el 31 ene. 2022 a las 20:41

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.