DEV Community

Integrating Semantic UI to an Angular CLI Project

Stephen Chiang on October 11, 2017

I’m tired of Bootstrap (Ok, I still love it and use it often). I recently discovered Semantic UI, and I’m loving it so far. For those of...
Collapse
 
josuevalrob profile image
Josue Valenica

Nope, it doesnt work, maybe I have a huge problem with my installation, look:

/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29
throw new Error(name + " version " + version + " is not currently supported");
^

Error: less version 3.0.4 is not currently supported
at Object.exports.load (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29:13)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/gulp-less/index.js:9:29)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/semantic-ui/tasks/watch.js:17:18)

Collapse
 
chiangs profile image
Stephen Chiang

I think I remember seeing this in one of my projects when using angular 6... When I wrote this article I was using 4 maybe 5...I have not tried integrating semantic since as I prefer to determine a lot of this stuff on my own now with css grid and angular material.

Collapse
 
josuevalrob profile image
Josue Valenica

Thanks. The error was with the less version. github.com/Semantic-Org/Semantic-U...

Thread Thread
 
chiangs profile image
Stephen Chiang

ah ok that makes sense, great you got it working!

Collapse
 
josuevalrob profile image
Josue Valenica

Is there any option that replaces the dependency of jquery?

Collapse
 
chiangs profile image
Stephen Chiang • Edited

The easy way is to include jQuery, but if you spend a little time with the debugger and watch what classes are being added and removed in the examples page, you can use plain vanilla js to query select and [ngClass] to do some, if not most, of the behaviors.

Collapse
 
josuevalrob profile image
Josue Valenica

I am trying this, what do you think: edcarroll.github.io/ng2-semantic-u...

Thread Thread
 
chiangs profile image
Stephen Chiang

I haven't tried it, but looks interesting; give it a shot and write about your experience on Dev!

Collapse
 
_quantumbit profile image
_Sachu • Edited

I tried to install it in the root folder of my NG project but it didn't work.

Note : Gulp was successfully installed with global scope though.

npm install semantic-ui (Error)

For some weird reason I am unable to attach helpful screenshots

Collapse
 
chiangs profile image
Stephen Chiang

These steps could be outdated now it's been awhile since I've added it to a project... Have you tried the ng2 version from the GitHub repo posted earlier in this discussion thread?

Collapse
 
sivaramakrishnan profile image
Siva Rama Krishnan C

Awesome..