实际化

Question

我想添加Font Awesome图标，以在我根据this MOOC开发的应用程序中使用，但是它产生了我不理解的错误。

首先，我在提示下输入以下内容，使用NPM搜索项目中的Font Awesome：

npm install font-awesome@4.7.0 --save

然后，我在src文件夹中添加了一个名为_variables.scss的新文件，并添加了以下内容：

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

然后，打开styles.scss文件并按如下所示进行更新：

. . .

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

. . .

但是当我使用ng serve --open启动服务时，会得到以下信息：

C：\ Users \ antoi \ Documents \ Programming \ Teaching \ Me \ FullStack \ Angular \ confusion> ng serve --open 10％的建筑3/3模块0个活动向导：项目正在http://localhost:4200/webpack-dev-server/运行我｢wds｣：webpack输出从/提供我｢wds｣：404将回退到//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.

代码在MOOC中，但是如果您需要存储库，请告诉我。

实际化

我做了一个ng update --all，并且我不再遇到错误。但是在app.component.html中添加组件页脚和页眉

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

我在本地主机上没有任何渲染。但是，如果删除页眉和页脚，则会再次呈现。但是，对于第一种情况和其他情况，我都没有错误。

Answer 1

您可以尝试使用angular-font-awesome软件包

npm i angular-font-awesome --save

现在将模块添加到app.module.ts中：

import {AngularFontAwesomeModule} from 'angular-font-awesome';

然后在导入数组中也将其添加

imports: [
    ..
    AngularFontAwesomeModule
];

添加真棒字体图标

实际化

1 个答案: