Angular 5 with Font Awesome 5

Question

After some researches including the read of Font Awesome 5 with Angular, documentation, etc I wasn't able to advance in the integration between Angular 5 App and Font-Awesome 5 (Pro).

Problem: Icons don't appear.

More detailed information about my current scenario:

package.json:

(...)
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-pro-light": "^5.0.6",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"popper.js": "^1.12.9",
"prismjs": "^1.11.0",
"rxjs": "^5.5.6",
"summernote": "^0.8.9",
"sweetalert2": "^7.11.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "^1.7.0-rc.0",
"@angular/compiler-cli": "^5.2.4",
"@angular/language-service": "^5.2.4",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "^2.0.3",
"@types/node": "^9.4.5",
"codelyzer": "^4.1.0",
"jasmine-core": "^2.99.1",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.3.0",
"ts-node": "^4.1.0",
"tslint": "^5.9.1",
"typescript": "^2.7.1"
}
(...)

angular-cli.json

    (...)
    "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jquery-ui/ui/data.js",
    "../node_modules/jquery-ui/ui/disable-selection.js",
    "../node_modules/jquery-ui/ui/scroll-parent.js",
    "../node_modules/jquery-ui/ui/widget.js",
    "../node_modules/jquery-ui/ui/widgets/mouse.js",
    "../node_modules/jquery-ui/ui/widgets/sortable.js",
    "../node_modules/sweetalert2/dist/sweetalert2.min.js",
    "../node_modules/summernote/dist/summernote.min.js",
    "../node_modules/@fortawesome/fontawesome/index.js (tried with and without this file)"
  ], (...)

During my researches I've understand that I need to specify what (icons) I need to use, as bellow:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

Then I need to pass those icons to fontawesome object:

fontawesome.library.add(faChevronLeft, faChevronRight);

And finally I've discovered (in the font-awesome documentation that I would need the call for i2svg method that is responsible to make the magic happens:

fontawesome.dom.i2svg();

Documentation says I must call the method without parameters. But the compiler point me to another direction where I must inform the following data:

export interface DOM {
  i2svg(params: { node: Node; callback: () => void }): void;
  css(): string;
  insertCss(): string;
}

The maximum I've achieved so far is a log in the browser made by font-awesome with the following information "fontawesome.dom.i2svg()" after this code:

fontawesome.dom.i2svg({ node: document.body, callback: callbacki2Svr });

function callbacki2Svr() { }

I've tried a lot (null results in "Uncaught TypeError: Cannot read property 'querySelectorAll' of null") and now I'm unable to advance. Does anyone have a suggestions?

Installation:

1) Followed the instructions on use node js ([TOKEN] is the key I've received from purchase):

 npm i --save @fortawesome/fontawesome
 npm config set @fortawesome:registry https://npm.fontawesome.com/[TOKEN]

 Created a .npmrc file in the root of my project with the following content:
 @fortawesome:registry=https://npm.fontawesome.com/[TOKEN]
 npm i --save @fortawesome/fontawesome-pro-light

2) updated angular-cli 3) rebuild the application using (ng b -aot) 4) started the project.

Thank you in advance!

Sample HTML Codes Login Page (no "i" tag)

<div class="login-page">
  <div class="wrapper-login">
    <img src="assets/image/logo/horizontal-bew.svg" />
    <raptor-textbox #txtUser type="text" iconClass="fa fa-user-o" iconPosition="right" placeholder="Login"
                [(value)]="userName" (onKeyUp)="updateUserName($event)" (onEnterPressed)="userKeyEnter()"></raptor-textbox>
    <raptor-textbox #txtPwd type="password" iconClass="fa fa-key" iconPosition="right" placeholder="Senha"
                [value]="pwd" (onKeyUp)="updatePwd($event)" (onEnterPressed)="pwdKeyEnter()"></raptor-textbox>
     <raptor-button cssClass="btn btn-light btn-block" text="Entrar" (click)="authenticate()"></raptor-button>
     <a [attr.href]="'#loginModal'" data-toggle="modal" [attr.data-target]="'#loginModal'">Forgot Password</a>
  </div>
</div>

<raptor-modal title="Forgot Password"
          icon="fa fa-envelope-o"
          cssClass="fade"
          classModal="modal-dialog modal-dialog-centered"
          modalId="loginModal"
          (onSavedClicked)="saveForm($event)"
          (onCancelClicked)="cancelModal($event)">

  <div class="row">
    <div class="form-group col-12">
      <label>Email</label>
      <raptor-textbox type="email" typeValue="email" applyValidation="true" applyMask="true" icon="fa fa-envelope" iconPosition="right" placeholder="E-mail..."></raptor-textbox>
    </div>
  </div>
</raptor-modal>

Raptor Button (with "i" tag)

<button type="button" [class]="cssClass" (click)="click()" [attr.data-target]="dataTarget" [attr.disabled]="isDisabled ?'' : null">
  <i *ngIf="hasIcon()" class="{{ icon }}"></i><span>{{ text }}</span>
</button>

/**
* verify if icon was defined
* @hasIcon
*
*/
public hasIcon() {
  return this.icon && this.icon.length > 0;
}

Answer 1

We are working on an official Angular component (it's in pre-release right now) https://github.com/FortAwesome/angular-fontawesome

However, @daniel-santana told us that this is not possible to integrate in their large app.

So the best advice I can give you is to not use the SVG with JS method. It uses advanced features like requestAnimationFrame and MutationObservers that just don't play well with Angular. If you are unable to refactor your app to use the new SVG format (which is new in Font Awesome 5) then stick with Web Fonts. Web Fonts for version 5 work just like web fonts in version 4. The upgrade to 5 would involve changing names for any of the icons that have been renamed. We have detailed docs here.