Using ngSemantic with Webpack

[beckmeindia]

Hi,
I am using the angular2 webpack in my project. Besides using npm install for this library, how do i setup ngSemantic for webpack?

[dzolnjan]

Install both semanticui and ngsemantic from npm:
npm install semantic-ui --save
npm install ng-semantic --save

Assuming you installed semanticui in root folder of you project (which is default), then you need to include semanticui assets from dist folder within your main.ts (src/main.ts) angular2 file:

import '../semantic/dist/semantic.css';
import '../semantic/dist/semantic.js';

After that you use it in ng2 app like described in readme https://github.com/vladotesanovic/ngSemantic#use

[beckmeindia]

Hey i did all that, but presently it is showing me this error

ERROR in .//ng-semantic/ng-semantic/popup/popup.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\popup
@ .//ng-semantic/ng-semantic/popup/popup.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/modal/modal.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\modal
@ .//ng-semantic/ng-semantic/modal/modal.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/visibility/visibility.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\visibility
@ .//ng-semantic/ng-semantic/visibility/visibility.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/dropdown/dropdown.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\dropdown
@ .//ng-semantic/ng-semantic/dropdown/dropdown.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/select/select.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\select
@ .//ng-semantic/ng-semantic/select/select.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/input/input.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\input
@ .//ng-semantic/ng-semantic/input/input.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/sidebar/sidebar.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\sidebar
@ .//ng-semantic/ng-semantic/sidebar/sidebar.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/tab/tab.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\tab
@ .//ng-semantic/ng-semantic/tab/tab.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/dimmer/dimmer.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\dimmer
@ .//ng-semantic/ng-semantic/dimmer/dimmer.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/accordion/accordion.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\accordion
@ .//ng-semantic/ng-semantic/accordion/accordion.js 1:0-17

ERROR in .//ng-semantic/ng-semantic/rating/rating.js
Module not found: Error: Cannot resolve module 'null-loader' in C:\Users\gemini
Desktop\angular2-dashboard\node_modules\ng-semantic\ng-semantic\rating
@ .//ng-semantic/ng-semantic/rating/rating.js 1:0-17

[dzolnjan]

Are you using that 'null-loader' loader in your webpack config? (I dont even have it installed in my setup)

[beckmeindia]

Yes I am using it as I have jQuery installed directly with npm & typings

On 18 Aug 2016 14:29, "Daniel Zolnjan" notifications@github.com wrote:

Are you using that 'null-loader' loader in your webpack config? (I dont
even have it installed in my setup)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#49 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQo6KGXkj9bMDXlMCS3PyoNkEpxir0dmks5qhB7zgaJpZM4JnPSv
.

[dzolnjan]

If its just for jquery you can remove null-loader and import jquery using the ProvidePlugin (standard jquery import setup)
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

[beckmeindia]

Presently after doing all the steps above mentioned I am getting this: Uncaught TypeError: core_1.NgModule is not a function

For ng-semantic.js :

NgSemanticModule = __decorate([
core_1.NgModule({
declarations: [exports.SEMANTIC_DIRECTIVES, exports.SEMANTIC_COMPONENTS],
exports: [exports.SEMANTIC_COMPONENTS, exports.SEMANTIC_DIRECTIVES],
imports: [common_1.CommonModule, forms_1.FormsModule, forms_1.ReactiveFormsModule]
}),
__metadata('design:paramtypes', [])
], NgSemanticModule);
return NgSemanticModule;

[vladotesanovic]

Hey,

Last night i updated everything on Angular RC.5...

There is no backward compitability so you will need to update your app too.

On 19 Aug 2016 11:59, "Beck Technology" notifications@github.com wrote:

Presently after doing all the steps above mentioned I am getting this:
Uncaught TypeError: core_1.NgModule is not a function

For ng-semantic.js :

NgSemanticModule = __decorate([
core_1.NgModule({
declarations: [exports.SEMANTIC_DIRECTIVES, exports.SEMANTIC_COMPONENTS],
exports: [exports.SEMANTIC_COMPONENTS, exports.SEMANTIC_DIRECTIVES],
imports: [common_1.CommonModule, forms_1.FormsModule,
forms_1.ReactiveFormsModule]
}),
__metadata('design:paramtypes', [])
], NgSemanticModule);
return NgSemanticModule;

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#49 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtFTmq9WX40XMDgW3QgeIwjr9GNL33kks5qhX5pgaJpZM4JnPSv
.

[papoola]

Could you please add how to install ngSemantic in webpack to readme. Angular CLI has switched to webpack and I am not getting ngSemantic to work any more.

[vladotesanovic]

Oh, things are changing to fast :)

I will update my README for webpack configuration.

Best regards!

Check it out: www.pinmap.io http://www.pinmap.io

On 19 August 2016 at 15:53, papoola notifications@github.com wrote:

Could you please add how to install ngSemantic in webpack to readme.
Angular CLI has switched to webpack and I am not getting ngSemantic to work
any more.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#49 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtFTpgUFTdD6OHgZMhF2IcdqeDhJNEVks5qhbVVgaJpZM4JnPSv
.

[vladotesanovic]

@papoola

Repository generated by Angular CLI with ngSemantic included

https://github.com/vladotesanovic/angular2-cli-webpack

// @todo
I need to find proper way to load semantic.min.css here....

[papoola]

Thank you @vladotesanovic ! I will check it out tonight. In the mean time you might wanna check angular/angular-cli#1747 once this has been merged it will make importing libraries JS and CSS much easier

[vladotesanovic]

Yep, i saw that.

Repository is just proof, i will try to improve it. If you find anything
where you can contribute, please feel free to do that.

Best regards!

Check it out: www.pinmap.io http://www.pinmap.io

On 21 August 2016 at 19:45, papoola notifications@github.com wrote:

Thank you @vladotesanovic https://github.com/vladotesanovic ! I will
check it out tonight. In the mean time you might wanna check
angular/angular-cli#1747
angular/angular-cli#1747 once this has been
merged it will make importing libraries JS and CSS much easier

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#49 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtFTib38D3r8lYFr3i1yeMSR3-y_8KSks5qiI63gaJpZM4JnPSv
.