Building a project in angular 10 and using scss as my styles builder. But after adding font awesome I am facing an error

Question

This is my styles/scss file where I am importing variables from variables.scss file:

 @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 
 @import 'variables';
 @import '../node_modules/font-awesome/scss/font-awesome';
    
//some basic resets 

 body {
        padding:0; 
        margin:0; 
        font-family: Roboto, sans-serif; 

}

.container {
        margin: 20px; 
        display:flex;
        flex-direction: column;
} 

This is my variables.scss file:

$fa-font-path : '../node_modules/font-awesome/fonts';

Error generated:

ERROR in ./node_modules/@angular/platform-browser/ivy_ngcc/fesm2015/animations.js 222:180-202 "export 'AnimationEngine' (imported as 'ɵngcc1') was not found in '@angular/animations/browser'

Answer 1

Okay so I have a fix for this. I was writing my imports for #font Awesome wrongly.

This is what I had initially.

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

However, after some angular updates, this way of calling font awesome is no longer supported and will generate an error. Therefore, this is how to actually call font-awesome.

  /* You can add global styles to this file, and also import other style files */
  @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  @import 'variables';
  @import '../node_modules/font-awesome/scss/_variables.scss';

Therefore, there is the fix.