Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
600
Igniteui-angular2 use with Webpack?
posted

Hello Team, 

I am trying to use igniteui-angular2 components with my angular2 App. It works fine with simpler application. 

I am now upgrading my application to work with Webpack. How would i configure Webpack to use 'Igniteui-angular2' components. 

my webpack vendor config is as follows,

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
resolve: {
extensions: ['', '.js'],
alias: {
'jquery.ui.core': 'jquery-ui/ui/core.js',
'jquery.ui.widget': 'jquery-ui/ui/widget.js'
}
},
module: {
loaders: [
{ test: /\.css/, loader: extractCSS.extract(['css']) },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" },
{ test: /\.gif$/, loader: "url-loader?mimetype=image/gif" },
]
},
entry: {
vendor: [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-shim',
'style-loader',
'jquery',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/platform-server',
'igniteui-angular2/igniteui.angular2',
'./wwwroot/libs/ignite-ui/css/structure/infragistics.css',
'./wwwroot/libs/ignite-ui/css/themes/infragistics/infragistics.theme.css',
'./wwwroot/libs/ignite-ui/js/infragistics.lob-lite.js',
'./wwwroot/libs/ignite-ui/js/infragistics.core-lite.js',
]
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
filename: '[name].js',
library: 'qms_[name]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: 'qms_[name]'
})
].concat(isDevelopment ?
[]
: [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
minimize: true,
mangle: false // Due to https://github.com/angular/angular/issues/6678
})
]
)
};

I use igniteui components via importing them in my component as follows,

import {IgDatePickerComponent, IgTextEditorComponent, IgNumericEditorComponent} from 'igniteui-angular2/igniteui.angular2';

It is not working as it says that igniteui-angular2 undefined. Is that the right way to use it ? Do you have any sample to show us how to use igniteui-angular2 components with webpack and angular2?

Please help me to understand this. 

Thanks in advance for your support.

Jeet