Using semantic ui with webpack on the Asp.Net Core Spa template

Question

I'm trying to use Semantic UI with Angular 2 over Asp.Net Core. I've started with the aspnetcore-spa project template from the JavaScript services official Yeoman templates which already has Asp.Net MVC Core, Webpack, Angular 2 and Bootstrap configured.

Then, I tried following the steps described on this GitHub to install Semantic UI.

The steps I did:

Installed Semantic UI using NPM npm install semantic-ui --save
- During the setup, I installed all the features and selected the install folder as wwwroot/lib/semantic/
Went to the wwwroot/lib/semantic folder and ran gulp build

That's where I started to be really unsure, in the template structure there's no vendor.ts, so I was not really sure where to put the import for the Semantic css and js.

The only thing I could find was the webpack.config.vendor.js that contained some entries for Bootstrap, so I modified the vendor property and added the import for the semantic js and css.

Here's how I modified it:

entry: {
    vendor: [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/platform-server',
        'angular2-universal',
        'angular2-universal-polyfills',
        'es6-shim',
        'es6-promise',
        'event-source-polyfill',
        'jquery',
        'zone.js',
        'wwwroot/lib/semantic/dist/semantic.min.js',
        'wwwroot/lib/semantic/dist/semantic.min.css',
        'ng-semantic'
    ]
}

I removed the references to bootstrap and added semantic.min.js, semantic.min.css, and ng-semantic.

Finally, I installed Ng-Semantic using NPM and added import { NgSemanticModule } from 'ng-semantic' into app.module.ts.

Now, when I try to run the application, I get the following error:

System.Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: jQuery is not defined

I get that this error is caused by the system trying to pre-render some code that rely on jQuery which is a big no-no and it's probably the semantic-ui.js. But I have absolutely no idea how that could be fixed.

For reference and easier troubleshooting, I've pushed the current status of the code to GitHub, it's available at this address.

Thanks in advance!

Try removing `app-prerenderer-module` attribute https://stackoverflow.com/questions/40257514/call-to-node-module-failed-with-errors-with-angular2-asp-net — yurzui, May 29 '17 at 18:19
Well, sure removing the pre-rendering will definitely fix the issue, but I wanted a solution where I could keep the pre-rendering. — Gimly, May 30 '17 at 09:04

score 2 · Accepted Answer · answered Aug 16 '17 at 14:56

I managed to make it work correctly, thanks in part to this other SO question: asp.net core spa template, Semantic UI

I'm copying the steps proposed in the question here, for simplicity and adding a few comments.

First, the idea is to install just the CSS for Semantic UI using NPM:
- npm install semantic-ui-css --save
Then, install the ng2-semantic-ui library. It allows to use all the Semantic UI components without dependency to JQuery.
- npm install ng2-semantic-ui --save
Open the webpack.config.vendor.js file, remove bootstrap and bootstrap.css in entry/vendor list and replace them by 'ng2-semantic-ui' and 'semantic-ui-css/semantic.css'
Rebuild the vendor.js using the command
- webpack --config webpack.config.vendor.js if you have webpack installed globally
- or node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod if you don't
Import SuiModule from ng2-semantic-uiin the app.module.client.ts file.
Finally, on the .Net side, in Views/Home/Index.html, replace asp-prerender-module by asp-ng2-prerender-module and the "Loading..." by the following:

<div class="ui active inverted dimmer"> <div class="ui text large loader">Loading</div> </div>

Then, you have to rewrite a lot of the app to replace the bootstrap css classes by Semantic UI's.

Using semantic ui with webpack on the Asp.Net Core Spa template

1 Answers1