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 11 months 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 10 months 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
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: Yes