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
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.
Hi Michael,
Thank you for your response.
I have now another question, is that mean if we do not use angular-cli for project generation then we can not use Webpack with our Angular2 App?
Please help me to understand your answer if i understood it wrong.
Awaiting for your response.
Regards,
Hi,
I just wanted to add some more errors i have encountered using the angular-cli with webpack.
1 - in the igniteui.angular2.ts file - in the IgComponent class there is a call to Reflect.getMetadata() and Reflect.defineMetadata() methods. when trying to run or build the app through ng serve or ng build - I get an error - "Property 'getMetadata' does not exist on type 'typeof Reflect'.". I had to add "declare var Reflect: any;" at the top of the ts file.2 - when adding the css files (structure/infragistics.css and theme/infragistics/infragistics.css) the build process fails on images missing. For the igPlayer the css files has classes with links to images under images/igTooltip folder that does not exist on the IgniteUi package that is being distributed.3 - Same as the above when adding the css files - a link to the font in "structure/fonts/icomoon.eot" has the wrong relative path. should be "fonts/icomoon.eot" instead of "../fonts/icomoon.eot". That cuase the build to fail as well.4 - had to add reference to the igniteui.d.ts at the top of the igniteui.angular2.ts as explained above.
After all those fixings the webpack works well.
Thanks
Ofer
Angular recommends using angular-cli since it now has Webpack support built in. Using Webpack without angular-cli requires you to set up Webpack manually. The idea is to not re-invent the wheel.
If you need to make any changes or customizations that the angular-cli doesn't do out of the box, that is still doable after scaffolding the project. You may even be able to create a dummy project and copy the Webpack config over to your existing project, but to setup a project with Webpack it is recommended to use the angular-cli.