I have successfully added a loader to my andular 6 project that will show the loader upon initial load until the app fully loads. I however cant seem to get a font awesome icon to load inside the spinner.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { AppComponent } from './app.component';
library.add(fab);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/index.html
<body>
<abe-root>
<div class="app-loading">
<div class="logo"><fa-icon [icon]="['fab', 'angular']"></fa-icon></div>
<svg class="spinner" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</abe-root>
</body>
It doesn't error or anything it just doesn't show the icon? I'm fairly new to angular so i may be doing something completely wrong.
This wont work
as there is no app context yet.
You can display FA fonts like this, without angular components (yet)
I also assume that you have incuded FA CSS in
index.htmlhead section.