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

Image for post
Image for post
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…

Image for post
Image for post
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!?

Image for post
Image for post
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

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:

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…

Until later,

Another Angular Whiz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store