Successful FontAwesome production build?

Ionic Framework
1

Has anyone been able to successfully build an app in Production mode with FontAwesome?
I have tried a variety of examples ans they all lead to error:
uncaught NullInjectorError: StaticInjectorError(a)[a -> e]:

Ionic ionfo:

 Ionic CLI                     : 6.5.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

I have tried:
(app.module.ts)
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

and using:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'

and various other ways in fresh new apps.

I have tried:

as well as instructions from:

2

Yes. I use the last method you cited (angular-fontawesome), and import each icon directly from its own file, instead of the package. In earlier versions of FA5, this was required in order for unused icons to tree-shake properly, although that may have been fixed by now - I haven’t bothered to investigate it in a while.

For example:

- import {faTruck} from "@fortawesome/pro-regular-svg-icons";
+ import {faTruck} from "@fortawesome/pro-regular-svg-icons/faTruck";
3

Hmm, I still get:

NullInjectorError: StaticInjectorError(i)[Ee -> e]: 
  StaticInjectorError(Platform: core)[Ee -> e]: 
    NullInjectorError: No provider for e!

Here is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
  exports: [FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and my app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

//import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import {faCoffee} from "@fortawesome/free-solid-svg-icons/faCoffee";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
  faCoffee = faCoffee;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

This was from a new project. Ionic Info above.
Works with serve but breaks with build --prod.
I have tried both in app.component and in home page.

package.json:

"@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0"

,

4

Can you try moving to Angular 9? My working scratch project:

$ ionic info
   Ionic CLI                     : 6.5.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.1
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 9.1.1
   @ionic/angular-toolkit        : 2.2.0

 "dependencies": {
    "@angular/common": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@fortawesome/angular-fontawesome": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/pro-duotone-svg-icons": "^5.13.0",
    "@fortawesome/pro-light-svg-icons": "^5.13.0",
    "@fortawesome/pro-regular-svg-icons": "^5.13.0",
    "@fortawesome/pro-solid-svg-icons": "^5.13.0",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"
  },

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomePage},
];

@NgModule({
  declarations: [AppComponent, HomePage],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), RouterModule.forRoot(routes), FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

import {Component} from '@angular/core';
import {faCoffee} from "@fortawesome/pro-regular-svg-icons/faCoffee";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  coffeeIcon = faCoffee;
  constructor() {}
}

<ion-content>
  <div>
    <fa-icon [icon]="coffeeIcon"></fa-icon>
  </div>
</ion-content>
5

It worked with 9.
Unfortunately, I dropped back to 8 for other reasons in my other apps.

I will have to revisit those issues and see if I can go full Angular 9 now.

Thanks for your time and the push to try it with 9.
Cheers

6

I didn’t notice this at the time, but one other option if you have other blockers is to try pinning @angular/fontawesome to 0.5.x, as their compatibility matrix indicates that’s the version compatible with Angular 8.

7

I ended up going Angular 9. It was a battle.

As far as Fontawesome goes though, I ended up putting all my required icons in a provider which I use across all pages.

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

import {

  faTruck, faHome, faMoneyCheckAlt .....
}

constructor(library: FaIconLibrary) {
    library.addIcons(faTruck, faHome, faMoneyCheckAlt ......

<fa-icon [icon]="['fas', 'home']"></fa-icon>

8

I do this too, but with a different syntax that I think is more amenable to tree-shaking (although again this may no longer be a concern: I was a very early adopter of angular-fontawesome, since it was in alpha):

class IconService {
  truck = faTruck;
  check = faMoneyCheckAlt;
}
class Page {
  constructor(public icons: IconService) {}
}

<fa-icon [icon]="icons.truck"></fa-icon>