0

Quería agregar los iconos de Font Awesome para usar dentro de mi aplicación que desarollo siguiendo el siguiente MOOC pero generó un error que no entendí.

Primero uso NPM para buscar Font Awesome en el proyecto escribiendo lo siguiente en el indicador:

npm install font-awesome@4.7.0 --save

Luego, agreguo un nuevo archivo llamado _variables.scss en la carpeta src y agregue lo siguiente:

$fa-font-path : '../node_modules/font-awesome/fonts';

Luego, abra el archivo styles.scss y actualícelo de la siguiente manera:

. . .

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

. . .

Pero cuando inicio el servido con ng serve --open obtengo lo siguiente :

C:\Users\antoi\Documents\Programming\Teaching\Me\FullStack\Angular\conFusion>ng serve --open 10% building 3/3 modules 0 activei 「wds」: Project is running at http://localhost:4200/webpack-dev-server/ i 「wds」: webpack output is served from / i 「wds」: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.08 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 122 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 394 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2019-08-26T10:11:22.403Z - Hash: 8fbb15623a903204f6d1 - Time: 11587ms

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:62:22 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Type 'MockMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

62 export declare class MockMediaQueryList implements MediaQueryList {
                        ~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:79:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

79     addListener(listener: MediaQueryListListener): void;
                             ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:81:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

81     removeListener(_: MediaQueryListListener): void;
                         ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:11:22 - error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Type 'ServerMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

11 export declare class ServerMediaQueryList implements MediaQueryList {
                        ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:28:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

28     addListener(listener: MediaQueryListListener): void;
                             ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:30:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

30     removeListener(_: MediaQueryListListener): void;
                         ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:42:15 - error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'ServerMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

42     protected _registry: Map<string, ServerMediaQueryList>;
                 ~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:54:15 - error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.

54     protected _buildMQL(query: string): ServerMediaQueryList;
                 ~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts:11:14 - error TS2416: Property 'subscribe' in type 'ObservableMedia' is not assignable to the same property in base type 'Subscribable<MediaChange>'.
  Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Subscription' is not assignable to type '{ (observer?: PartialObserver<MediaChange>): Unsubscribable; (next: null, error: null, complete: () => void): Unsubscribable; (next: null, error: (error: any) => void, complete?: () => void): Unsubscribable; (next: (value: MediaChange) => void, error: null, complete: () => void): Unsubscribable; (next?: (value: Medi...'.
    Types of parameters 'next' and 'observer' are incompatible.
      Type 'PartialObserver<MediaChange>' is not assignable to type '(value: MediaChange) => void'.
        Type 'NextObserver<MediaChange>' is not assignable to type '(value: MediaChange) => void'.
          Type 'NextObserver<MediaChange>' provides no match for the signature '(value: MediaChange): void'.

11     abstract subscribe(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void): Subscription;
                ~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.

El codigo esta en el MOOC pero si necesitan el repositorio, digame.

Actualizacion

Hicé un ng update --all y ya no tengo los errores. Sin embargo en app.component.html cuando anadi los components footer y header

<app-header></app-header>
<app-menu></app-menu>
<app-footer></app-footer>

No tengo más renderizado en el localhost. Pero si elimino el encabezado y el pie de página, vuelvo a tener el renderizado. Sin embargo, para el primer caso como para el otro no tengo ningún error.

1 respuesta 1

0

En principio solo con importarlo a los angular.json, en styles, debería funcionar. Te dejo un link a continuación https://medium.com/@smarrerof/c%C3%B3mo-arrancar-un-proyecto-angular-6-utilizando-bootstrap-4-y-font-awesome-4-5322c834c117 Y si no prueba a llamar desde el index.html al cdn de font-awesome

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Espero que te sirva. Un saludo.

Tu Respuesta

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

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