ambujkhanna
commented
3 years ago @devoto13 Any suggestion or help?
Closed ambujkhanna closed 3 years ago
ambujkhanna
commented
3 years ago @devoto13 Any suggestion or help?
devoto13
commented
3 years ago So let's say I have created a new project using Angular CLI, added angular-fontawesome library using ng add, and cleaned up some template code:
$ ng new test-proj
$ cd test-proj
$ ng add @fortawesome/angular-fontawesome
ℹ Using package manager: npm
✔ Package information loaded.
✔ Package successfully installed.
? Choose Font Awesome icon packages you would like to use: Free Solid Icons
UPDATE package.json (1364 bytes)
UPDATE src/app/app.module.ts (407 bytes)
✔ Packages installed successfully.
$ cat src/app/app.component.html
<fa-icon [icon]="myIcon"></fa-icon>
$ cat src/app/app.component.ts
import { Component } from '@angular/core';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myIcon: IconDefinition = null;
}
$ cat src/app/app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [FontAwesomeModule],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
fixture.detectChanges();
expect(app).toBeTruthy();
});
});
As you can see I've forgotten to set my icon.
If I use ng test, I can observe the error in the browser console:
Error: Property `icon` is required for `fa-icon`/`fa-duotone-icon` components.
at faWarnIfIconSpecMissing (_karma_webpack_/webpack:/node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js:97)
at FaIconComponent.ngOnChanges (_karma_webpack_/webpack:/node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js:234)
at FaIconComponent.rememberChangeHistoryAndInvokeOnChangesHook (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1520)
at callHook (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2583)
at callHooks (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2542)
at executeInitAndCheckHooks (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2493)
at refreshView (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9495)
at refreshComponent (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10651)
at refreshChildComponents (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9277)
at refreshView (_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9530)Now I want to hit DEBUG button, open developer tools and put a breakpoint inside FaIconComponent.ngOnChanges in the node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js:234 and reload the page. Once the breakpoint is hit, I can use ng.getHostComponent(this) to get a reference to the problematic <fa-icon></fa-icon> instance and can use right click -> Reveal in Elements panel to see where the problematic instance comes from:
While stopped, you can also check what value has been passed to the component's icon proprety:
You can also use call stack to see where exactly in you code you have triggered a change detection, which led to this problem by looking for the closest frame in your application's code:
I hope this will provide you enough information to find the actual place where you pass a wrong value to the icon property.
devoto13
commented
3 years ago Hope you were able to resolve your problem by now.
If you still experience the problem and believe that there is a bug in angular-fontawesome, please provide a minimal reproduction we can look at.
Hi,
I am getting below error during execution of my Test cases.
I have already taken care of below points:
FontAwesomeTestingModulealready imported in theabc.steps.tstest fileimport { FontAwesomeTestingModule } from '@fortawesome/angular-fontawesome/testing';abc.component.tsfileimport { faPencilAlt, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';public faPencilAlt = faPencilAlt; public faChevronDown = faChevronDown; public faChevronUp = faChevronUp;abc.component.html<fa-icon [icon]="faPencilAlt"></fa-icon><fa-icon [icon]="currentlyExpandedSection === 'adSection' ? faChevronUp : faChevronDown"></fa-icon>