Topic: Fortawesome misspelling
Expected behavior
I followed the "Advanced installation" tutorial here: https://mdbootstrap.com/docs/angular/getting-started/installation/
and the project is unable to build because there's a typo in the {myProject}/src/styles.css file
"fontawesome" is misspelled as "fortawesome" ("R" instead of "N")
ng new my-app
choose SCSS
cd my-app
ng add mdb-angular-ui-kit
choose Y to everything
ng serve -o
Actual behavior
project fails to load. you see Cannot GET / in the browser
Resources (screenshots, code snippets etc.)
``` /* You can add global styles to this file, and also import other style files */ @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/regular.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~mdb-angular-ui-kit/assets/scss/mdb.scss'; ```
Thanks!
turns out it's not a misspelling, but there still is a path error.
If you use Angular 15, you need to change your {myProject}/src/styles.scss file to this:
@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
@import '../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
@import '../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
Only then will your project compile.
Arkadiusz Idzikowski staff commented 2 years ago
The syntax with ~ was deprecated in v3.0.0. In newer versions you should be able to import the styles using the path without the tilde sign: @import '@fortawesome/fontawesome-free/scss/fontawesome.scss';.
It seems that by mistake we didn't add this fix in imports automatically generated by the ng add command in MDB Free version. I added this to our to-do list and we will resolve this problem in the next update.
Arkadiusz Idzikowski staff commented 2 years ago
This bug was fixed in v5.0.0
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: -
- Device:
- Browser:
- OS:
- Provided sample code: No
- Provided link: Yes