Uncaught Error: Property `icon` is required for `fa-icon`/`fa-duotone-icon` components. at http://localhost:9876/_karma_webpack_/polyfills.js:23598:29

ambujkhanna commented 3 years ago

Describe the problem

Hi,

I am running my test case in the project. I am facing below error when test cases are executing. Although they are not breaking my test case but still printing lots of logs in the console. Below error is not coming during ng serve.

I am working on 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

App.modules

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">

### 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" },

Please do let me know if you need any further information from my end. I am looking for urgent solution. Thanks!

asamkamalesan commented 3 years ago

Maybe FontAwesomeTestingModule fix the issue ? https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/guide/testing.md#use-fontawesometestingmodule-to-mock-icon-library

ambujkhanna commented 3 years ago

@asamkamalesan Thanks for your input. It does not solved my above issue but really helped me to resolve below error. Error: Could not find icon with iconName=faDownload and prefix=fas in the icon library.

devoto13 commented 3 years ago

As I commented in your SO question the error is probably caused by incorrectly used fa-icon icon component (it may also be in the component nested inside your EventsComponent. You'll need to identify where exactly the error is coming from, otherwise, there is not much we can do.

You may find this information helpful.

devoto13 commented 3 years ago

Closing as duplicate of #304

FortAwesome / angular-fontawesome