How to add Semantic UI components to your Angular 8 app… without getting frustrated.

Photo by Plush Design Studio on Unsplash

Introduction

Are you looking for a Semantic UI package that you can easily install and import into your Angular application?

I mean, hey, there’s the Angular Material and the Angular Bootstrap so shouldn’t there be an Angular Semantic package?

Googling…

Is there a Semantic UI package for Angular?

Say, here’s a project called Semantic-UI-Angular. But according to GitHub there’s been no commits since 2016… an indicator that the project is dead.

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!?

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

2. Add the needed CSS and JavaScript files to angular.json

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.