全局图标库已弃用。 FortAwesome/angular-fontawesome

Question

package.json

{
  "name": "socialtools-frontend-apps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "proxy-prod": "ng serve --port 4202 --ssl --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem --proxy-config proxy.conf.json --prod --disable-host-check",
    "proxy-dev": "ng serve --port 4202 --ssl --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem --proxy-config proxy.conf.json --disable-host-check",
    "proxy": "ng serve --port 4202 --proxy-config proxy.conf.json --disable-host-check"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/architect": "^0.901.13",
    "@angular-devkit/build-optimizer": "^0.901.13",
    "@angular-devkit/build-webpack": "^0.901.13",
    "@angular-devkit/core": "^9.1.13",
    "@angular-devkit/schematics": "^9.1.13",
    "@angular/animations": "^9.1.13",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/http": "^6.0.0",
    "@angular/localize": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ngtools/webpack": "^9.1.13",
    "@ngx-share/button": "^7.0.0",
    "@ngx-share/buttons": "~7.0.0",
    "@ngx-share/core": "~7.0.0",
    "@socialtools/core": "file:../socialtools/dist/core/socialtools-core-0.0.286.tgz",
    "@tinymce/tinymce-angular": "^2.5.0",
    "@types/moment": "^2.13.0",
    "bootstrap": "^4.5.3",
    "core-js": "^3.6.5",
    "jquery": "^3.3.1",
    "moment": "^2.27.0",
    "moment-precise-range-plugin": "^1.3.0",
    "moment-timer": "^1.3.0",
    "net": "^1.0.2",
    "ng-pick-datetime": "^7.0.0",
    "ng2-timezone-selector": "^0.2.4",
    "ngx-color-picker": "^9.1.0",
    "ngx-device-detector": "^1.4.5",
    "ngx-print": "^1.2.0-beta.5",
    "ngx-sharebuttons": "^8.0.5",
    "ngx-spinner": "^9.0.2",
    "popper.js": "^1.14.3",
    "rss-to-json": "^1.1.2",
    "rxjs": "^6.5.5",
    "stream": "0.0.2",
    "sweetalert2": "^7.28.10",
    "timers": "^0.1.1",
    "tslib": "^2.1.0",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.13",
    "@angular/cli": "^9.1.11",
    "@angular/compiler-cli": "^9.1.11",
    "@angular/language-service": "^9.1.13",
    "@types/jasmine": "~3.5.10",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.11.1",
    "codelyzer": "~5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~3.3.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "node-sass": "^4.14.1",
    "protractor": "^7.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.2",
    "typescript": "^3.8.3"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

嗨，我当时正在使用 ngx-sharebuttons，因为当时我遇到了这个错误，任何人都可以帮我解决以下错误..

错误错误：不推荐使用全局图标库。有关迁移说明，请咨询 https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md。

Answer 1

我最近遇到了同样的问题。 以下是我解决问题的方法： 首先我导入以下内容：

import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

第二

@NgModule({
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
})

第三

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, fab, far);
  }
}

希望对大家有所帮助

Answer 2

我将我的 Angular 升级到 10 版本，这个问题已经解决..

编辑我的 package.json 之后

{
  "name": "socialtools-frontend-apps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "proxy-prod": "ng serve --port 4202 --ssl --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem --proxy-config proxy.conf.json --prod --disable-host-check",
    "proxy-dev": "ng serve --port 4202 --ssl --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem --proxy-config proxy.conf.json --disable-host-check",
    "proxy": "ng serve --port 4202 --proxy-config proxy.conf.json --disable-host-check"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.4",
    "@angular/cdk": "^10.2.4",
    "@angular/common": "10.2.4",
    "@angular/compiler": "^10.2.4",
    "@angular/core": "^10.2.4",
    "@angular/forms": "10.2.4",
    "@angular/http": "^6.0.0",
    "@angular/localize": "^11.1.0",
    "@angular/platform-browser": "10.2.4",
    "@angular/platform-browser-dynamic": "10.2.4",
    "@angular/router": "^10.2.4",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@ng-bootstrap/ng-bootstrap": "^9.0.1",
    "@ngx-share/button": "~7.0.0",
    "@ngx-share/buttons": "^7.0.0",
    "@ngx-share/core": "~7.0.0",
    "@socialtools/core": "file:../socialtools/dist/core/socialtools-core-0.0.286.tgz",
    "@tinymce/tinymce-angular": "^2.0.1",
    "@types/moment": "^2.13.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "moment-precise-range-plugin": "^1.3.0",
    "moment-timer": "^1.3.0",
    "net": "^1.0.2",
    "ng-pick-datetime": "^6.0.15",
    "ng2-timezone-selector": "^0.2.4",
    "ngx-color-picker": "^6.6.0",
    "ngx-device-detector": "^1.3.5",
    "ngx-print": "^1.2.0-beta.3",
    "ngx-sharebuttons": "^8.0.5",
    "ngx-spinner": "^6.1.2",
    "popper.js": "^1.14.3",
    "rss-to-json": "^1.0.5",
    "rxjs": "^6.0.0",
    "stream": "0.0.2",
    "sweetalert2": "^7.28.10",
    "timers": "^0.1.1",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.26",
    "@angular/cli": "^10.2.1",
    "@angular/compiler-cli": "^10.2.4",
    "@angular/language-service": "10.2.4",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.14.1",
    "protractor": "^5.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.9.4"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}