How to add Semantic UI components to your Angular 8 app… without getting frustrated.
Are you looking for a Semantic UI package that you can easily install and import into your Angular application?
Here’s another option called ngSemantic. But this one appears to have been abandoned in 2016 as well.
…none of this looks very promising…
…so let’s just dive in and follow the installation directions on the Semantic UI website.
Frustrating Gulp errors when installing Semantic UI
The directions say to install it like so:
npm i --save semantic-ui
But now I’m getting weird errors…. ReferenceError: primordials is not defined!?
According to this post on StackOverflow the issue can be fixed by upgrading to Gulp 4… but after upgrading Gulp the issue persists.
This is more frustrating and complicated than I imagined. But we’re developers and good developers NEVER give up.
Installing Semantic UI the simple way
1. Install the Semantic UI CSS version
There’s a simplified version of the Semantic UI framework that doesn’t require gulp.
This is a basic version that only supports the basic Semantic UI theme — but it should do the job.
Let’s run the command below to install a simplified version of Semantic UI.
npm i --save semantic-ui-css
In your Angular project open the angular.json file and look for the section called styles.
Inside of this section you can import the style-sheets for the different components you want to use. We can add support for buttons like so:
3. Add support for all the components (not recommended)
What about if you want to add support for all the components?
Generally, this isn’t a recommended idea — it will tend to bloat your project by adding CSS rules that you’ll never use.
But since you insist you can load the entire library using a CDN by editing your index.html file to look like this.
Well done — We did it!
I hope you found this short article helpful and simple.
Please give it more energy with some 👏 👏 👏 to help spread these tips to a wider audience! Thank-you.
And feel free to check out some other short, helpful Angular posts…
7 money murdering mistakes that only Angular developers make…
Download a FREE copy of the "7 money murdering mistakes that only Angular developers make"
How to Deploy an Angular App to Firebase Hosting in 2019…
Deploying should be something a toddler could do. But say…
5 minute guide to building an Angular app with Material… in 2019
Say, why do some people think Angular is a complicated framework? This quick guide will show that Angular is a…
Another Angular Whiz