How to include jQuery and Semantic-ui in Webpack Angular 2

Question

I'm new to Webpack and using it for an Angular2 project ( https://angularclass.github.io/angular2-webpack-starter/ ).

I'm having a hard time getting jQuery and Semantic-ui to work (both .css and .js) after npm install ing it. I suppose it's somewhat problematic because both libraries are not in any module format, and can not simply be require(...) ed or import ed

Do I need to include them simply in the index.html as normal , or is there a 'Webpack way' to do this ?

Answer 1

Follow these steps:

1. Install Semantic-UI using npm: npm install semantic-ui --save
   and follow the instructions during the installation process.
   I installed it under src/assets .

2. "Build" Semantic using gulp build inside its directory.
   This will create another directory under /semantic called dist or whatever name you set as output directory during the installation process.
   

3. Now we will have to tell Webpack to load Semantic's .js and .css files (the ones in the newly created /semantic/dist/ directory).
   I generated my project using angular-cli and have my configs in the root directory in a file called angular-cli.json .
   It looks like this:
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   Look for "styles" and "scripts" in the JSON and add Semantic's minified .css and .js respectively:
   "assets/semantic/dist/semantic.min.css"
   and
   "assets/semantic/dist/semantic.min.js"

4. As you already stated in your question, Semantic-UI needs jQuery in order to work.
   We will just add the script to the <.head> of index.html (in the /src directory):
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. Build or serve your app again and you should have Semantic-UI working properly ;)
   
   Hope this helps.