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.