我正在项目中运行我的测试用例。执行测试用例时，我遇到以下错误。虽然他们没有破坏我的测试用例，但仍然在控制台中打印大量日志。
我正在开发 Angular v11。
Chrome 88.0.4298.0 (Windows 10) ERROR
Uncaught Error: Property icon is required for fa-icon/fa-duotone-icon components.
at http://localhost:9876/_karma_webpack_/polyfills.js:23598:29
Error: Property icon is required for fa-icon/fa-duotone-icon components.
at faWarnIfIconSpecMissing (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js:97:1)
at FaIconComponent.ngOnChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js:234:1)
at FaIconComponent.rememberChangeHistoryAndInvokeOnChangesHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1520:1)
at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2583:1)
at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2542:1)
at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2493:1)
at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9481:1)
at refreshEmbeddedViews (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10591:1)
at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9490:1)
at refreshEmbeddedViews (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10591:1)
应用程序模块
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
**events.component.ts**
import { faSearch, faSpinner, faCaretDown, faSync } from '@fortawesome/free-solid-svg-icons';
// Font Awesome Icons
public faSearch = faSearch;
public faSpinner = faSpinner;
public faCaretDown = faCaretDown;
public faRefresh = faSync;
events.component.html
<fa-icon *ngIf="searching.searchText" [icon]="faSearch"></fa-icon>
Package.json
"dependencies": {
"@angular/animations": "11.2.10",
"@angular/common": "11.2.10",
"@angular/compiler": "11.2.10",
"@angular/core": "11.2.10",
"@angular/forms": "11.2.10",
"@angular/platform-browser": "11.2.10",
"@angular/platform-browser-dynamic": "11.2.10",
"@angular/router": "11.2.10",
"@fortawesome/angular-fontawesome": "0.8.2",
"@fortawesome/fontawesome-common-types": "0.2.35",
"@fortawesome/fontawesome-svg-core": "1.2.35",
"@fortawesome/free-brands-svg-icons": "5.15.3",
"@fortawesome/free-regular-svg-icons": "5.15.3",
"@fortawesome/free-solid-svg-icons": "5.15.3",
"@ng-select/ng-option-highlight": "0.0.6",
"@ng-select/ng-select": "6.1.0",
"@ngx-translate/core": "12.1.2",
"@ngx-translate/http-loader": "4.0.0",
"angular2-uuid": "1.1.1",
"animate.css": "3.7.2",
"asn1js": "2.0.26",
"bootstrap": "3.4.1",
"bootstrap-vertical-tabs": "1.2.2",
"chart.js": "2.9.4",
"core-js": "3.11.1",
"deep-object-diff": "1.1.0",
"dragula": "3.7.2",
"ejs": "3.0.2",
"font-awesome": "4.7.0",
"http-errors": "1.7.3",
"http-status-codes": "1.4.0",
"ipaddr.js": "1.9.1",
"jquery": "3.5.1",
"lodash": "4.17.20",
"moment": "2.24.0",
"moment-timezone": "0.5.28",
"ng-busy": "11.0.0",
"ng2-charts": "2.3.0",
"ng2-dragula": "2.1.1",
"ng2-tree": "2.0.0-rc.11",
"ngx-bootstrap": "5.6.1",
"ngx-clipboard": "12.3.1",
"ngx-ui-switch": "6.0.3",
"number-abbreviate": "2.0.0",
"pkijs": "2.1.88",
"postcss": "8.2.13",
"postcss-url": "8.0.0",
"pvutils": "1.0.17",
"reflect-metadata": "0.1.13",
"rxjs": "6.6.3",
"rxjs-compat": "6.5.5",
"sta-interface": "file:../common/sta-interface",
"sta-mock": "file:../common/sta-mock",
"tslib": "1.10.0",
"typeahead.js": "0.11.1",
"uuid": "3.4.0",
"validator": "13.0.0",
"version": "0.1.2",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "8.4.1",
"@angular-devkit/build-angular": "0.1102.9",
"@angular-devkit/core": "11.2.9",
"@angular-eslint/builder": "4.0.0",
"@angular-eslint/eslint-plugin": "4.0.0",
"@angular-eslint/eslint-plugin-template": "4.0.0",
"@angular-eslint/schematics": "4.0.0",
"@angular-eslint/template-parser": "4.0.0",
"@angular/cli": "11.2.9",
"@angular/compiler-cli": "11.2.10",
"@angular/language-service": "11.2.10",
"@babel/preset-env": "7.9.5",
"@types/chai": "4.2.11",
"@types/core-js": "2.5.3",
"@types/cucumber": "4.0.4",
"@types/dragula": "3.7.0",
"@types/jasmine": "2.8.8",
"@types/jasmine-jquery": "1.5.33",
"@types/jquery": "3.3.34",
"@types/karma-jasmine": "0.0.29",
"@types/node": "13.11.1",
"@types/sinon": "9.0.0",
"@types/typeahead": "0.11.32",
"@typescript-eslint/eslint-plugin": "2.31.0",
"@typescript-eslint/parser": "2.31.0",
"babel-core": "6.26.3",
"babel-loader": "8.1.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"chai": "4.2.0",
"codelyzer": "5.2.0",
"cucumber": "1.3.0",
"del-cli": "3.0.0",
"eslint": "6.8.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-jasmine": "4.1.2",
"eslint-plugin-prettier": "3.3.1",
"eslint-plugin-sonarjs": "0.5.0",
"formdata-polyfill": "3.0.19",
"html-webpack-plugin": "4.2.0",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "5.0.1",
"karma": "6.3.2",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-cucumber-js": "1.0.3",
"karma-html-reporter": "0.2.7",
"karma-jasmine": "2.0.0",
"karma-jasmine-html-reporter": "1.5.3",
"karma-jasmine-jquery-2": "0.1.1",
"karma-junit-reporter": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-sinon": "1.0.5",
"prettier": "2.2.1",
"puppeteer": "5.5.0",
"sinon": "9.0.2",
"stats-webpack-plugin": "0.7.0",
"ts-node": "8.8.2",
"typescript": "4.0.7",
"webpack": "4.42.1"
},
如果您需要我提供的任何进一步信息，请告诉我。
使用
Angular v17.3.3问题：
我收到了同样的错误消息。对我来说，问题是
[icon]null<fa-icon [icon]="i === 0 ? null : xIcon" />
解决方案：
@if (i !== 0) {
<fa-icon [icon]="xIcon" />
}