[rjwijnenParticipant]

Can you maybe tell me where it should be? I cannot find it in the typescript definition file.

[rjwijnenParticipant]

Also another question where did the ‘colorFunction’ go? I can only find the fillColor but that is for a static value.

[rjwijnenParticipant]

Then i get an Array of Objects. Do i need to do something like this now:

return “Cursus” + this.eindresultaten[itemIndex].cursus + “<br>Resultaat: ” this.eindresultaten[itemIndex].eindresultaat

[rjwijnenParticipant]

It says: ‘Cannot read property ‘eindresultaten’ of undefined’

Also i see i placed the wrong template part: I’am using: <jqxChart [width]='"100%"' [height]='300' [source]='eindresultaten' [description]='false' [auto-create]='false' #chartReferenceVerschil></jqxChart>

And my config is without: source: this.eindresultaten, because that won’t work.

[rjwijnenParticipant]

Thanks for the response. But when is the next version to be released? Is this within 1-2 weeks or more like month(s)?

[rjwijnenParticipant]

Dear Peter,

As you can see in my example i am using a width of: <jqxChart [width]='”100%”‘ [height]=’400’
On load it works, but when i resize the window the graph is at its old width and not resized to the 100% of the new window size.

[rjwijnenParticipant]

My excuses, i think i found the problem. In my webpack config i had the commonchunkplugin configured also for the jqw js files. I my dev. config i did not have this.

[rjwijnenParticipant]

Now i am getting the following error when using AOT build (the build succeeds but when opening the page this error occured, normal build without AOT shows the chart oke and no errors) :
TypeError: this.host.jqxChart is not a function

[rjwijnenParticipant]

I tried it this evening. As soon as i configure webpack to create a bundled vendor file it fails to load my example app (error jqxbaseframework is not defined). When i place the four files with the script tag on the index.htm it works…

<script src="app/scripts/jquery.js"></script> 
<script src="app/scripts/jqxcore.js"></script> 
<script src="app/scripts/jqxdraw.js"></script>    
<script src="app/scripts/jqxbargauge.js"></script>

I was hoping to replace all script tags when using webpack to bundle everything. But somehow webpack isn’t bundling the jqwidget JS files correctly i think.

[rjwijnenParticipant]

I tried the AOT compilation (a bit different from whats on this website) But i still have: Uncaught ReferenceError: jqxBaseFramework is not defined. (With the import of:
import ‘./app/jqwidgets/jqxcore’;
import ‘./app/jqwidgets/jqxdraw’
import ‘./app/jqwidgets/jqxbargauge’;

Tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "files": [
    "angularApp/app/app.module.ts",
    "angularApp/app/about/about.module.ts",
    "angularApp/app/jqw/jqw.module.ts",
    "angularApp/app/test/test.module.ts",
    "angularApp/main-aot.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "noImplicitAny": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "node"     
    ]
  },
  "files": [
    "angularApp/app/app.module.ts",
    "angularApp/app/about/about.module.ts",
    "angularApp/app/jqw/jqw.module.ts",
    "angularApp/app/test/test.module.ts",
    "angularApp/main.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

webpack.prod.js:

var path = require('path');

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var helpers = require('./webpack.helpers');

console.log('@@@@@@@@@ USING PRODUCTION @@@@@@@@@@@@@@@');

module.exports = {

    entry: {
        'vendor': './angularApp/vendor.ts',
        'polyfills': './angularApp/polyfills.ts',
        'app': './angularApp/main-aot.ts' // AoT compilation
    },

    output: {
        path: './wwwroot/',
        filename: 'dist/[name].[hash].bundle.js',
        chunkFilename: 'dist/[id].[hash].chunk.js',
        publicPath: '/'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        outputPath: path.join(__dirname, 'wwwroot/')
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular-router-loader?aot=true&genDir=aot/'
                ]
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
            },
            {
                test: /favicon.ico$/,
                loader: 'file-loader?name=/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ],
        exprContextCritical: false
    },

    plugins: [
        new CleanWebpackPlugin(
            [
                './wwwroot/dist',
                './wwwroot/assets'
            ]
        ),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            sourceMap: false
        }),
        new webpack.optimize.CommonsChunkPlugin(
            {
                name: ['vendor', 'polyfills']
            }),

        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: 'body',
            template: 'angularApp/index.html'
        }),

        new CopyWebpackPlugin([
            { from: './angularApp/images/*.*', to: 'assets/', flatten: true }
        ]),
        
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

[rjwijnenParticipant]

Any idea when the next version will be released? When i read through the other topics on this forum i see i am not the only one with this problem? Would it help when i post my bundled JS file?

[rjwijnenParticipant]

I finally got it somehow working. But i’m getting the following errors: `ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:61:16
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:62:26
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:63:22
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:64:49
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:70:60
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:74:19
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:75:60
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:98:13
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:99:12
Index signature of object type implicitly has an ‘any’ type.
ERROR in [default] C:\Projecten\BMO KPIs\Angular2WebpackVisualStudio-master\src\Angular2WebpackVisualStudio\angularApp\app\jqwidgets-ts\angular_jqxbargauge.ts:99:42
Index signature of object type implicitly has an ‘any’ type.`

Also the bargauge only works when i import jqx-all in my vendor.ts It is not working when i only import jqxdraw, jqxbargauge & jqxcore. Instead of jqxdraw and jqxbargauge i import jqx-all, but that is not the ideal solution i think. I’m using JQWidgets 4.5 now.

[rjwijnenParticipant]

Any ideas on how to do this, because all JS files are bundled into one file in my example?

[Author]

Posts