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

Question

I am new to Webpack and use it for the Angular2 project ( https://angularclass.imtqy.com/angular2-webpack-starter/ ).

It's hard for me to get jQuery and Semantic-ui to work (both .css and .js) after npm install ing. I believe this is somewhat problematic because both libraries are not in any modular format and cannot simply be require(...) ed or import ed

Do I just need to include them in index.html as usual, or is there a "Webpack" way to do this?

Answer 1

Follow these steps:

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

• gulp build semantics using gulp build inside your directory.
  
  This will create another directory under /semantic called dist , or any other name that you set as the output directory during the installation process.
  

• Now we will need to say that Webpack loads the files Semantic.js and .css (those that were in the newly created directory /semantic/dist/ ).
  
  I generated my project using angular-cli and had 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 JSON and add Semantic minified.css and .js respectively:
  "assets/semantic/dist/semantic.min.css"
  and
  "assets/semantic/dist/semantic.min.js"

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

• Build or maintain the application again, and you should have the correct Semantic-UI interface;)
  
  
  Hope this helps.