Semantic UI and Angular - The guide to make them harmonize

Daniel Kreider
Daniel Kreider
Published on 13. Apr. 2021
  • Semantic UI

Struggling with weird gulp errors?

Here's how to add Semantic UI components to your Angular app… without getting frustrated.

Is there a Semantic UI package for Angular?

Say, here's a project called Semantic-UI-Angular. But Github commit history reveals 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!?

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

  1. 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:

"styles": [
  "src/styles.css",
  "node_modules/semantic-ui-css/components/button.min.css"
],
  1. 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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

Well done - We did it!

I hope you found this short article helpful and simple. 👏 👏 👏

Go ahead and ping me if you have any questions or suggestions.