1

Como no utilizo yarn busque por npm (enlace).

En src/app/app.module.ts

Import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'

Lo agrego a los imports

FontAwesomeModule

Y esto me causa el siguiente error por consola:

Uncaught Error: Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError (compiler.js:1016) at compiler.js:10584 at Array.forEach () at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10553) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23850) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23831) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23791) at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143) at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4352) at Object../src/main.ts (main.ts:11)

Actualización 1:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing, appRoutingProviders } from './app.routing';
import { DataTablesModule } from 'angular-datatables';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { FontAwesomeModule } from '@fortawesome/fontawesome-free';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home.component';
import { ConversorPipe } from './pipes/conversorMayusMinus.pipe';
import { ErrorComponent } from './components/error.component';

import { CategoriaComponent } from './components/categoria.component';
import { ColorComponent } from './components/color.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ConversorPipe,
    ErrorComponent,
    CategoriaComponent,
    ColorComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    ReactiveFormsModule,
    HttpClientModule,
    DataTablesModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Actualización 2:

Cambiar la siguiente linea de código

import { FontAwesomeModule } from '@fortawesome/fontawesome-free';

por esta :

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

Esto me genera el siguiente error:

./node_modules/@fortawesome/angular-fontawesome/fesm5/angular-fontawesome.js Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in 'C:\wamp64\www\webapp\node_modules\@fortawesome\angular-fontawesome\fesm5'

Actualización 3: Agregar:

import { library } from '@fortawesome/fontawesome-svg-core';

Me genera el siguiente error:

error

Actualización 4:

Siguiendo la sugerencia de @LPZadkiel. error

9
  • puedes mostrar el codigo de los imports, aparentemente es un error de sintax o alguna coma, muestra el js donde haces estos imports.
    – zerokira
    Commented el 3 oct. 2018 a las 15:18
  • @TheVicious agregado.
    – bypabloc_
    Commented el 3 oct. 2018 a las 15:21
  • puedes cambiar la siguiente linea de código import { FontAwesomeModule } from '@fortawesome/fontawesome-free'; por esta : import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; ensaya y me dices que sucede.
    – zerokira
    Commented el 3 oct. 2018 a las 15:26
  • @TheVicious actualizado el nuevo error.
    – bypabloc_
    Commented el 3 oct. 2018 a las 15:45
  • agrega esto import { library } from '@fortawesome/fontawesome-svg-core'; debajo del import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    – zerokira
    Commented el 3 oct. 2018 a las 15:53

1 respuesta 1

8

En vista y considerando que estas usando npm y no yarn pues no tienes otra opción mas que usar los iconos al estilo html. Debes hacerlo de la siguiente forma

ejecutar

npm install --save @fortawesome/fontawesome-free

luego en el archivo angular.json agregar lo siguiente

        "styles": [
           "node_modules/@fortawesome/fontawesome-free/css/all.css"
        ]

o esto (cualquiera de las dos opciones sirve)

"scripts": [
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]

y luego los usas agregando los iconos en los html:

<i class="fa fa-camera-retro fa-lg"></i>

es solo agregar la class por lo que aun puedes hacerlo desde los archivos typescript

NOTA: Con esta solución no debes hacer un import { FontAwesomeModule } from ... solo agregas el archivo all.css o all.js (solo uno no ambos) y lo empiezas a usar con las class en los elementos html <i>

10
  • ¿Como puedo actualizarlo a font-awesome 5+?
    – bypabloc_
    Commented el 3 oct. 2018 a las 16:34
  • con la línea npm install... si no asignas una versión te descargará automáticamente la última versión. Yo hice la prueba y me descargó la versión 5.3.1
    – LPZadkiel
    Commented el 3 oct. 2018 a las 16:55
  • Pregunte por la actualización porque chequee en el package,json, en las "dependencies" dice "font-awesome": "^4.7.0",, Hay algo que me causa el problema que ahora me presenta.
    – bypabloc_
    Commented el 3 oct. 2018 a las 17:02
  • no sabría decirte, a mi me descargó la última versión, prueba con esto npm install FortAwesome/[email protected]
    – LPZadkiel
    Commented el 3 oct. 2018 a las 17:05
  • Verifique el archivo en node_modules/@fortawesome/fontawesome-free/css/all.css y, efectivamente, es la ultima versión. Ya no importo en app.module sino que lo hago como tu dices. Sin embargo persiste el error que te muestro en pantalla.
    – bypabloc_
    Commented el 3 oct. 2018 a las 17:10

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.