Tengo el siguiente menú el cual se muestra al iniciar mi aplicación en angular, mi problema es que no me redirecciona a las paginas que vienen ahi y me sale el siguiente error en el log, que no se a que se deba, por que ya instale el package de FontAwesomeModule y lo importe en mi app.module.ts
<div class="container>
<div class="col-sm-6">Menú principal</div>
<div class="center">
<a routerLink="/consulta-datos-uno" routerLinkActive="active" >
<fa-icon [icon]="faClock" class="coloricon fa-2x"></fa-icon>
<label class="letraicon">Consultar datos 1</label>
</a>
</div>
<div class="center">
<a routerLink="/consulta-datos-dos" routerLinkActive="active">
<fa-icon [icon]="faBook" class="coloricon fa-2x"></fa-icon>
<label class="letraicon">Consultar datos 2</label>
</a>
</div>
</div>
Error:
error NG8002: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
- If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
- If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.+ <fa-icon [icon]="faHist" class="fa-2x">
Lo raro es que ese error me lo indica en los icon que yo uso en mi pagina a la que quiero redireccionar desde el menu principal, es decir, en la pagina consultar-datos-uno en esta parte <fa-icon [icon]="faHist" class="fa-2x">
tengo lo siguiente en el archivo app-routing-module.ts
const routes: Routes = [
{path:'sm/:session', children: [], canActivate: [HeaderSessionGuard]},
{path:'', redirectTo: 'menu-principal', pathMatch: 'full' },
{path: '**', redirectTo: 'menu-principal',pathMatch: 'full',},
{path:'menu-principal', component: MenuPrincipalComponent, canActivate: [SessionGuard]},
{
path: 'consulta-datos-uno',
loadChildren: () => import('./consulta-datos-uno/consulta-datos-uno.module').then(mod => mod.ConsultaDatosUnoModule),
canActivate: [SessionGuard],
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
y en el componente cosulta-datos-uno, tengo estos archivos, el primero es el consulta-datos-uno-routing-module.ts
const routes: Routes = [
{
path: '',
component: ConsultaDatosUnoComponent
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ConsultaDatosUnoRoutingModule {}
consulta-datos-uno-module.ts:
@NgModule({
declarations: [ConsultaDatosUnoComponent],
imports: [CommonModule, ConsultaDatosUnoRoutingModule, ReactiveFormsModule],
})
export class ConsultaDatosUnoModule {}
consulta-datos-uno.component.ts:
@Component({
selector: 'app-consulta-datos-uno',
templateUrl: './consulta-datos-uno.component.html',
styleUrls: ['./consulta-datos-uno.component.css']
})
export class ConsultaDatosUnoComponent implements OnInit {
faHist = faCalendarAlt;
faClock = faClock;
faVal = faChartLine;
constructor() { }
ngOnInit(): void {
$('#iconosSalir').show();
}
}
consulta-datos-uno.html:
<div class="container">
<div class="col-sm-6">Submenu</div>
<div class="center">
<a routerLink="/consulta-pagos" routerLinkActive="active" >
<fa-icon [icon]="faHist" class="fa-2x"></fa-icon>
<label class="letraicon">Consultar pagos</label>
</a>
</div>
<div class="center">
<a routerLink="/consulta-inventario" routerLinkActive="active" >
<fa-icon [icon]="faClock" class="fa-2x far"></fa-icon>
<label class="letraicon">Consultar inventario</label>
</a>
</div>
</div>
como puedo resolver ese error que hace referencia al uso de los fa-icon? y ver que si funcione mi redireccionamiento o que puede estar mal en esa parte?