Topic: Fortawesome misspelling

Ryannnnn priority asked 1 year ago


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!


Ryannnnn priority answered 1 year ago


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 1 year 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 11 months ago

This bug was fixed in v5.0.0



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes