Add @fortawesome/fontawesome-free to an Angular project

gistfile1.txt

How to add Font Awesome @fortawesome/fontawesome-free to an Angular project?

1) Go to the project directory

2) Install Font Awesome as said on their website: 
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
through npm: npm install --save @fortawesome/fontawesome-free
Use '--save' not '--save-dev'

3) Add Font Awesome to 'styles' in 'anguler.json':
"styles": [
"./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"./node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"src/styles.scss"
]

4) Import Font Awesome to 'styles.scss' and add the path to the font:
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

I did all this but get an error in my stylesheet

Can't find stylesheet to import.
╷
3 │ @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

UPDATE: I was able to fix by changing the import path to '../node_modules/@fortawesome/fontawesome-free/scss/filename.scss' on each of the imports in the styles.scss