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

Parents
No Data
Reply
  • 18204
    Offline posted

    Hi Jeet,

    The angular-cli has started using Webpack, so if you create your project using angular-cli, Webpack will already be configured to build with any components imported.  Then in the project created, you would need to run "npm install igniteui-angular2", and import the IgniteUI components you need and it will be all set up.

    Unfortunately, I noticed an issue on our side while testing this when it tries to compile everything, so I've submitted it on github here for us to look into.

    You can keep an eye on this issue to see when this will be resolved.

    If you have any further questions or concerns with this, please let me know.

Children