jQWidgets Forums

This topic contains 13 replies, has 3 voices, and was last updated by Ivo Zhulev 8 years, 3 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Angular2 Webpack budle js Posts

December 19, 2016 at 9:55 am Angular2 Webpack budle js #89937

Participant

I am new to Angular2 and Webpack. I used this: https://github.com/damienbod/Angular2WebpackVisualStudio as an starting point to set up an JQWidget prototype for our company. I thought it would be possible to bundle all the JS files into one file, but i am having difficulties with the JQWidget JS files. (For example:
Index.html:

<!doctype html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular 2 Webpack Template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

vendor.ts


import 'jquery/src/jquery';
import 'bootstrap/dist/js/bootstrap';

import './css/bootstrap.css';
import './css/bootstrap-theme.css';

import './styles/jqx.base.css';

import './scripts/jqxcore';
import './scripts/jqxdraw';
import './scripts/jqxbargauge';

main-aot.ts:

// Entry point for AoT compilation.
export * from './polyfills';
export * from './vendor';

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';

enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap":  true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "./wwwroot/aot",
    "rootDir": "./app",
    "typeRoots": [ "./node_modules/@types" ],
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  },
  "exclude": [
    "node_modules",
    "aot"
  ]
}

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');

console.log("@@@@@@@@@ USING DEVELOPMENT @@@@@@@@@@@@@@@");

module.exports = {

    devtool: 'source-map',
    performance: {
        hints: false
    },
    entry: {
        'app': './app/main.ts' // JiT compilation
    },

    output: {
        path: "./wwwroot/",
        filename: 'dist/[name].bundle.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?tsconfig=tsconfig.json',
                    'angular2-template-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
                exclude: /node_modules/,
                loader: "file-loader?name=assets/[name]-[hash:6].[ext]",
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                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/fonts',
                './wwwroot/assets'
            ]
        ),

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

        new CopyWebpackPlugin([
            { from: './angular2App/images/*.*', to: "assets/", flatten: true }
        ])
        
    ], resolve: {
        modules: [
          'node_modules',
          path.resolve(__dirname, 'app')
        ],
        extensions: ['.ts', '.js']
    },

};

But i am getting errors like:
jqxBaseFramework is not defined

December 19, 2016 at 11:25 am Angular2 Webpack budle js #89947

Ivo Zhulev

Participant

Hi rjwijnen,

This error is caused mainly by this 3 things:
1. jQuery framework undefined or included after the jQWidgets files
2. make sure jqxcore.js is the first jqwidgets javascript file that you register on the page.
3. you are using mix of jQWidgets versions.

Check this options, we are awaiting your response.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

January 3, 2017 at 4:48 pm Angular2 Webpack budle js #90271

rjwijnen

Participant

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

January 3, 2017 at 9:05 pm Angular2 Webpack budle js #90276

Gary

Participant

Hi Rjwjnen,

I have a development environment working with angular-cli@1.0.0-beta.24. This setup process uses WEBPACK with JQWIDGETS 4.4.0 and Angular 2.3.1.
My intent was to use all Open Source products and procedures with minimum configuration to make things work.

However, I do not have anything in writing on what I changed right now but, I can send you copies of my files short term and then in a couple of days I will put together the steps I performed to make this work for me. The JQWIDGETS are getting loaded to the script bundle and the Angular 2 components are being loaded to the main bundle.

The one thing I have tried and have a problem with is AOT. I just have not had a chance to get back into looking at the issue.

If this sounds like something that might work for you please send me an email to ghaddon1@gmail.com.

Regards,
Gary

January 4, 2017 at 7:34 am Angular2 Webpack budle js #90288

Ivo Zhulev

Participant

Hi Gary,

Have you looked at the ‘AOT’ tutorial?
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angular2/angular2-webpack.htm

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

January 4, 2017 at 6:28 pm Angular2 Webpack budle js #90335

Gary

Participant

Ivo,

I have but, I just have not had the time to work on that piece just yet. I want to make sure I have done my diligence before asking for help.

Again, I’m using angular-cli@1.0.0-beta.24 and some of the WEBPACK definitions are not exposed and I want to work through that tool.

Thanks for reaching out. I’ll be back either way once I get back to that task.

Best regards,
Gary

February 8, 2017 at 8:47 am Angular2 Webpack budle js #91385

rjwijnen

Participant

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.

February 8, 2017 at 9:46 am Angular2 Webpack budle js #91389

Ivo Zhulev

Participant

Hi rjwijnen,

Its strange that it only works with jqx-all. Maybe there is some difference in the files?
As for the errors, they are caused because it wants all arguments to have a data type. In the next release, there shall be not such ones. For now, just go to this lines and set a type to the arguments(for example ‘any’).

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

February 13, 2017 at 7:28 am Angular2 Webpack budle js #91506

rjwijnen

Participant

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?

February 13, 2017 at 8:27 am Angular2 Webpack budle js #91508

Ivo Zhulev

Participant

Hi rjwijnen,

Thanks but your bundled JS file won’t help. Can I please advise you to switch to AOT compilation? The one you use is a bit outdated. And I can assure you, that you will have less problems with it.

As for the next release, it will be very soon.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

February 13, 2017 at 2:44 pm Angular2 Webpack budle js #91526

rjwijnen

Participant

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'
        })
    ]
};

February 13, 2017 at 2:54 pm Angular2 Webpack budle js #91528

Ivo Zhulev

Participant

Hi rjwijnen,

Can you try making a simple example following the AOT guide in our website. Make the config files the same as in our AOT guide. And tell us if you get errors again.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

February 13, 2017 at 8:24 pm Angular2 Webpack budle js #91539

rjwijnen

Participant

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.

February 16, 2017 at 8:45 am Angular2 Webpack budle js #91612

Ivo Zhulev

Participant

Hi rjwijnen,

This is the default behavior. You must have added the jQWidgets core files in your .html file.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.