Introduction (Angular)

This view shows the FlexGrid control's basic features. It binds the grid to a data source and has menus below that allow you to select the number of data items, the selection mode, and the culture, and whether to use data mapping and formatting. Notice how the grid remains fast and fluid even with large numbers of data items. FlexGrid achieves this level of performance by automatically virtualizing rows and columns.

This example uses Angular.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { AppPipesModule } from './app.pipe'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _itemCount = 500; private _culture = 'en'; private _dataMaps = true; private _formatting = true; private _filter = ''; private _toFilter: any; private _thisFilterFunction: wjcCore.IPredicate; private _groupBy = ''; private _pageSize = 0; protected dataSvc: DataService; data: any[]; // references FlexGrid named 'flex' in the view @ViewChild('flex') flex: wjcGrid.FlexGrid; // DataSvc will be passed by derived classes constructor( @Inject(DataService) dataSvc: DataService) { this.dataSvc = dataSvc; this._thisFilterFunction = this._filterFunction.bind(this); this.data = dataSvc.getData(this.itemCount); } get itemCount(): number { return this._itemCount; } set itemCount(value: number) { if (this._itemCount != value) { this._itemCount = value; this.data = this.dataSvc.getData(this.itemCount); this.groupBy = ''; } } get dataMaps(): boolean { return this._dataMaps; } set dataMaps(value: boolean) { if (this._dataMaps != value) { this._dataMaps = value; this._updateDataMaps(); } } get formatting(): boolean { return this._formatting; } set formatting(value: boolean) { if (this._formatting != value) { this._formatting = value; this._updateFormatting(); } } get culture(): string { return this._culture; } set culture(value: string) { if (this._culture != value) { this._culture = value; this._loadCultureInfo(); } } get filter(): string { return this._filter; } set filter(value: string) { if (this._filter != value) { this._filter = value; this._applyFilter(); } } get groupBy(): string { return this._groupBy; } set groupBy(value: string) { if (this._groupBy != value) { this._groupBy = value; this._applyGroupBy(); } } get pageSize(): number { return this._pageSize; } set pageSize(value: number) { if (this._pageSize != value) { this._pageSize = value; if (this.flex) { (<wjcCore.IPagedCollectionView>this.flex.collectionView).pageSize = value; } } } ngAfterViewInit() { if (this.flex) { this.updateDataMapSettings(); } } // update data maps, formatting, paging now and when the itemsSource changes itemsSourceChangedHandler() { var flex = this.flex; if (!flex) { return; } // make columns 25% wider (for readability and to show how) for (var i = 0; i < flex.columns.length; i++) { flex.columns[i].width = flex.columns[i].renderSize * 1.25; } // update data maps and formatting this.updateDataMapSettings(); // set page size on the grid's internal collectionView if (flex.collectionView && this.pageSize) { (<wjcCore.IPagedCollectionView>flex.collectionView).pageSize = this.pageSize; } }; updateDataMapSettings() { this._updateDataMaps(); this._updateFormatting(); } toggleColumnVisibility() { var flex = this.flex; var col = flex.columns[0]; col.visible = !col.visible; }; changeColumnSize() { var flex = this.flex; var col = flex.columns[0]; col.visible = true; col.width = col.width < 0 ? 60 : -1; col = flex.rowHeaders.columns[0]; col.width = col.width < 0 ? 40 : -1; }; toggleRowVisibility() { var flex = this.flex; var row = flex.rows[0]; row.visible = !row.visible; }; changeRowSize() { var flex = this.flex; var row = flex.rows[0]; row.visible = true; row.height = row.height < 0 ? 80 : -1; row = flex.columnHeaders.rows[0]; row.height = row.height < 0 ? 80 : -1; }; changeDefaultRowSize() { var flex = this.flex; flex.rows.defaultSize = flex.rows.defaultSize == 28 ? 65 : 28; }; changeScrollPosition() { var flex = this.flex; if (flex.scrollPosition.y == 0) { var sz = flex.scrollSize; flex.scrollPosition = new wjcCore.Point(-sz.width / 2, -sz.height / 2); } else { flex.scrollPosition = new wjcCore.Point(0, 0); } }; // apply/remove data maps private _updateDataMaps() { var flex = this.flex; if (flex) { var colCountry = flex.getColumn('countryId'); var colProduct = flex.getColumn('productId'); var colColor = flex.getColumn('colorId'); if (colCountry && colProduct && colColor) { if (this.dataMaps == true) { colCountry.dataMapEditor = wjcGrid.DataMapEditor.DropDownList; // show drop-down for countries colProduct.dataMapEditor = wjcGrid.DataMapEditor.AutoComplete; // don't show it for products colColor.dataMapEditor = wjcGrid.DataMapEditor.AutoComplete; // or colors (just to show how) colCountry.dataMap = this._buildDataMap(this.dataSvc.getCountries()); colProduct.dataMap = this._buildDataMap(this.dataSvc.getProducts()); colColor.dataMap = this._buildDataMap(this.dataSvc.getColors()); } else { colCountry.dataMap = null; colProduct.dataMap = null; colColor.dataMap = null; } } } } // build a data map from a string array using the indices as keys private _buildDataMap(items: any[]): wjcGrid.DataMap { var map = []; for (var i = 0; i < items.length; i++) { map.push({ key: i, value: items[i] }); } return new wjcGrid.DataMap(map, 'key', 'value'); } // apply/remove column formatting private _updateFormatting() { var flex = this.flex; if (flex) { var fmt = this.formatting; this._setColumnFormat('amount', fmt ? 'c' : null); this._setColumnFormat('amount2', fmt ? 'c' : null); this._setColumnFormat('discount', fmt ? 'p0' : null); this._setColumnFormat('start', fmt ? 'MMM d yy' : null); this._setColumnFormat('end', fmt ? 'HH:mm' : null); } } private _setColumnFormat(name: string, format: string) { var col = this.flex.getColumn(name); if (col) { col.format = format; } } private _loadCultureInfo() { wjcCore.httpRequest('bin/Devel/sources/cultures/wijmo.culture.' + this.culture + '.js', { success: (xhr: XMLHttpRequest) => { eval(xhr.response); wjcCore.Control.invalidateAll(); } }); } // ICollectionView filter function private _filterFunction(item: any) { var f = this.filter; if (f && item) { // split string into terms to enable multi-field searches such as 'us gadget red' var terms = f.toUpperCase().split(' '); // look for any term in any string field for (var i = 0; i < terms.length; i++) { var termFound = false; for (var key in item) { var value = item[key]; if (wjcCore.isString(value) && value.toUpperCase().indexOf(terms[i]) > -1) { termFound = true; break; } } // fail if any of the terms is not found if (!termFound) { return false; } } } // include item in view return true; } // apply filter (applied on a 500 ms timeOut) protected _applyFilter() { if (this._toFilter) { clearTimeout(this._toFilter); } var self = this; this._toFilter = setTimeout(function () { self._toFilter = null; if (self.flex) { var cv = self.flex.collectionView; if (cv) { if (cv.filter != self._thisFilterFunction) { cv.filter = self._thisFilterFunction; } else { cv.refresh(); } } } }, 500); } private _applyGroupBy() { if (this.flex) { // get the collection view, start update var cv = this.flex.collectionView; cv.beginUpdate(); // clear existing groups cv.groupDescriptions.clear(); // add new groups var groupNames = this.groupBy.split('/'), groupDesc; for (var i = 0; i < groupNames.length; i++) { var propName = groupNames[i].toLowerCase(); if (propName == 'amount') { // group amounts in ranges // (could use the mapping function to group countries into continents, // names into initials, etc) groupDesc = new wjcCore.PropertyGroupDescription(propName, function (item:any, prop: string) { var value = item[prop]; if (value > 1000) return 'Large Amounts'; if (value > 100) return 'Medium Amounts'; if (value > 0) return 'Small Amounts'; return 'Negative'; }); cv.groupDescriptions.push(groupDesc); } else if (propName) { // group other properties by their specific values groupDesc = new wjcCore.PropertyGroupDescription(propName); cv.groupDescriptions.push(groupDesc); } } // done updating cv.endUpdate(); } } } // @NgModule({ imports: [WjInputModule, WjGridModule, AppPipesModule, BrowserModule, FormsModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="container-fluid"> <!-- search box --> <div class="row"> <div class="col-md-6 col-xs-4"> <input type="text" class="form-control app-pad" placeholder="Filter" [(ngModel)]="filter" /> </div> <div class="col-md-6 col-xs-8"> <wj-collection-view-navigator [cv]="flex.collectionView" class="pull-right"> </wj-collection-view-navigator> </div> </div> <!-- the grid --> <wj-flex-grid #flex class="grid" [allowResizing]="'Both'" [itemsSource]="data" [allowMerging]="'All'" [stickyHeaders]="true" (itemsSourceChanged)="itemsSourceChangedHandler()"> </wj-flex-grid> <!-- commands --> <div class="well"> <div class="grid-sort-group"> <!-- current selection --> <p>Selection: <b>{{flex.selection | cellRange}}</b></p> <!-- data size --> <wj-menu [(value)]="itemCount" [header]="'Items'"> <wj-menu-item [value]="5">5</wj-menu-item> <wj-menu-item [value]="50">50</wj-menu-item> <wj-menu-item [value]="500">500</wj-menu-item> <wj-menu-item [value]="5000">5,000</wj-menu-item> <wj-menu-item [value]="50000">50,000</wj-menu-item> <wj-menu-item [value]="100000">100,000</wj-menu-item> <wj-menu-item [value]="500000">500,000</wj-menu-item> <wj-menu-item [value]="1000000">1,000,000</wj-menu-item> </wj-menu> <!-- allow add new --> <wj-menu [(value)]="flex.allowAddNew" [header]="'Allow Add'"> <wj-menu-item [value]="true">Yes</wj-menu-item> <wj-menu-item [value]="false">No</wj-menu-item> </wj-menu> <!-- selection mode --> <wj-menu [(value)]="flex.selectionMode" [header]="'Selection'"> <wj-menu-item [value]="0">None</wj-menu-item> <wj-menu-item [value]="1">Cell</wj-menu-item> <wj-menu-item [value]="2">CellRange</wj-menu-item> <wj-menu-item [value]="3">Row</wj-menu-item> <wj-menu-item [value]="4">RowRange</wj-menu-item> <wj-menu-item [value]="5">ListBox</wj-menu-item> </wj-menu> <!-- headers visibility --> <wj-menu [(value)]="flex.headersVisibility" [header]="'Headers Visibility'"> <wj-menu-item [value]="0">None</wj-menu-item> <wj-menu-item [value]="1">Column</wj-menu-item> <wj-menu-item [value]="2">Row</wj-menu-item> <wj-menu-item [value]="3">All</wj-menu-item> </wj-menu> <!-- highlight headers --> <wj-menu [(value)]="flex.showSelectedHeaders" [header]="'Show Selected Headers'"> <wj-menu-item [value]="0">None</wj-menu-item> <wj-menu-item [value]="1">Column</wj-menu-item> <wj-menu-item [value]="2">Row</wj-menu-item> <wj-menu-item [value]="3">All</wj-menu-item> </wj-menu> <!-- show marquee --> <wj-menu [(value)]="flex.showMarquee" [header]="'Show Marquee'"> <wj-menu-item [value]="true">On</wj-menu-item> <wj-menu-item [value]="false">Off</wj-menu-item> </wj-menu> <!-- data maps --> <wj-menu [(value)]="dataMaps" [header]="'Data Maps'"> <wj-menu-item [value]="true">On</wj-menu-item> <wj-menu-item [value]="false">Off</wj-menu-item> </wj-menu> <!-- formatting --> <wj-menu [(value)]="formatting" [header]="'Formatting'"> <wj-menu-item [value]="true">On</wj-menu-item> <wj-menu-item [value]="false">Off</wj-menu-item> </wj-menu> <!-- culture --> <!-- <wj-menu [(value)]="culture" [header]="'Culture'"> <wj-menu-item [value]="'en'">English</wj-menu-item> <wj-menu-item [value]="'de'">German</wj-menu-item> <wj-menu-item [value]="'it'">Italian</wj-menu-item> <wj-menu-item [value]="'fr'">French</wj-menu-item> <wj-menu-item [value]="'pt'">Portuguese</wj-menu-item> <wj-menu-item [value]="'ru'">Russian</wj-menu-item> <wj-menu-item [value]="'ja'">Japanese</wj-menu-item> <wj-menu-item [value]="'ko'">Korean</wj-menu-item> </wj-menu> --> <br /> <br /> <!-- testing the object model --> <button class="btn btn-default" (click)="toggleColumnVisibility()"> Show/Hide Column </button> <button class="btn btn-default" (click)="changeColumnSize()"> Resize Column </button> <button class="btn btn-default" (click)="toggleRowVisibility()"> Show/Hide Row </button> <button class="btn btn-default" (click)="changeRowSize()"> Resize Row </button> <button class="btn btn-default" (click)="changeDefaultRowSize()"> Default Row Size </button> <button class="btn btn-default" (click)="changeScrollPosition()"> Scroll Position </button> </div> </div> </div>
import { Injectable } from '@angular/core'; @Injectable() export class DataService { // data used to generate random items private _products = ['Widget', 'Gadget', 'Doohickey']; private _colors = ['Black', 'White', 'Red', 'Green', 'Blue']; private _someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; getCountries(): string[] { return this._someCountries; } getProducts(): string[] { return this._products; } getColors(): string[] { return this._colors; } // get matches for a search term getData(count: number): any[] { var data = []; var dt = new Date(); // add count items for (var i = 0; i < count; i++) { // constants used to create data items var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * this._someCountries.length), productId = Math.floor(Math.random() * this._products.length), colorId = Math.floor(Math.random() * this._colors.length); // create the item var item = { id: i, start: date, end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)), country: this._someCountries[countryId], product: this._products[productId], color: this._colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; // add the item to the list data.push(item); } return data; } }
.wj-flexgrid { height: 400px; margin: 6px 0; } .grid-sort-group .wj-menu, .grid-sort-group .btn { margin: 2px 2px 2px 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', //'reflect-metadata': 'npm:reflect-metadata/Reflect.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', //'rxjs': 'npm:rxjs', //'rxjs/operators': 'npm:rxjs/operators', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', "@grapecity/wijmo.angular2.chart.analytics": "npm:@grapecity/wijmo.angular2.chart.analytics/index.js", "@grapecity/wijmo.angular2.chart.animation": "npm:@grapecity/wijmo.angular2.chart.animation/index.js", "@grapecity/wijmo.angular2.chart.annotation": "npm:@grapecity/wijmo.angular2.chart.annotation/index.js", "@grapecity/wijmo.angular2.chart.finance.analytics": "npm:@grapecity/wijmo.angular2.chart.finance.analytics/index.js", "@grapecity/wijmo.angular2.chart.finance": "npm:@grapecity/wijmo.angular2.chart.finance/index.js", "@grapecity/wijmo.angular2.chart.hierarchical": "npm:@grapecity/wijmo.angular2.chart.hierarchical/index.js", "@grapecity/wijmo.angular2.chart.interaction": "npm:@grapecity/wijmo.angular2.chart.interaction/index.js", "@grapecity/wijmo.angular2.chart.radar": "npm:@grapecity/wijmo.angular2.chart.radar/index.js", "@grapecity/wijmo.angular2.chart": "npm:@grapecity/wijmo.angular2.chart/index.js", "@grapecity/wijmo.angular2.core": "npm:@grapecity/wijmo.angular2.core/index.js", "@grapecity/wijmo.angular2.gauge": "npm:@grapecity/wijmo.angular2.gauge/index.js", "@grapecity/wijmo.angular2.grid.detail": "npm:@grapecity/wijmo.angular2.grid.detail/index.js", "@grapecity/wijmo.angular2.grid.filter": "npm:@grapecity/wijmo.angular2.grid.filter/index.js", "@grapecity/wijmo.angular2.grid.grouppanel": "npm:@grapecity/wijmo.angular2.grid.grouppanel/index.js", "@grapecity/wijmo.angular2.grid.search": "npm:@grapecity/wijmo.angular2.grid.search/index.js", "@grapecity/wijmo.angular2.grid.multirow": "npm:@grapecity/wijmo.angular2.grid.multirow/index.js", "@grapecity/wijmo.angular2.grid.sheet": "npm:@grapecity/wijmo.angular2.grid.sheet/index.js", '@grapecity/wijmo.angular2.grid.transposed': 'npm:@grapecity/wijmo.angular2.grid.transposed/index.js', "@grapecity/wijmo.angular2.grid": "npm:@grapecity/wijmo.angular2.grid/index.js", "@grapecity/wijmo.angular2.input": "npm:@grapecity/wijmo.angular2.input/index.js", "@grapecity/wijmo.angular2.olap": "npm:@grapecity/wijmo.angular2.olap/index.js", "@grapecity/wijmo.angular2.viewer": "npm:@grapecity/wijmo.angular2.viewer/index.js", "@grapecity/wijmo.angular2.nav": "npm:@grapecity/wijmo.angular2.nav/index.js", "@grapecity/wijmo.angular2.directivebase": "npm:@grapecity/wijmo.angular2.directivebase/index.js", 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', //'typescript': 'https://unpkg.com/typescript@3.2.2', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, // 'rxjs': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, //'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, // 'rxjs/webSocket': {main: 'index.js', defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);