I think I may be missing a step to get the ignite controls working with angular 2 and webpack.
I've created a webapp using the following template, Angular2 Template For Visual Studio. I then install ignite-ui and igniteui-angular2 npm packages. Then add both of them as vendor entries in the webpack.config.vendor.js file. The problem is when I try to run the app I keep getting Jquery undefined errors coming from my javascript. Any advice to get this running wound be appreciated.
Thanks.
Hello,
Make sure you have disabled server side prerendering http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/#so-whats-the-point-of-server-side-prerendering
I am also having the same issue when trying to get the igniteui-angular2 setup to use igGrid. I reviewed the sample you provided and the only thing I see thatI didn't have setup was the css links and scripts references in _laout.cshtml.
<!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.dv.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
I added them and I am still getting the same error:
Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: jQuery is not definedReferenceError: jQuery is not definedat Object.extractAllGridFeatureOptions (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\igniteui-angular2\index.js:66:32)at D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\igniteui-angular2\index.js:163:28at Object.<anonymous> (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\igniteui-angular2\index.js:168:2)at Module._compile (module.js:570:32)at Object.Module._extensions..js (module.js:579:10)at Module.load (module.js:487:32)at tryModuleLoad (module.js:446:12)at Function.Module._load (module.js:438:3)at Module.require (module.js:497:17)at require (internal/module.js:20:19)at resolvePromise (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:468:31)at resolvePromise (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:453:17)at D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:502:17at ZoneDelegate.invokeTask (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:265:35)at Object.onInvokeTask (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\@angular\core\bundles\core.umd.js:5966:41)at ZoneDelegate.invokeTask (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:264:40)at Zone.runTask (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:154:47)at drainMicroTaskQueue (D:\dev\VRF\VRF-North-America\VRF-NA\JCI.BE.VRF.NA.Web\node_modules\zone.js\dist\zone-node.js:401:35)at runMicrotasksCallback (internal/process/next_tick.js:58:5)at _combinedTickCallback (internal/process/next_tick.js:67:7)
I'm attaching Angular2 template in Visual Studio 2015 with IgTextEditorComponent, please review it and let me know if it if it helps.
Thanks for posting into our community!
I'll investigate this one and return back to you once I've got some feedback.