How to use Webpack with Angular 4

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS.

Initial Configuration



For start we need to tell Webpack our application entry and output points


    var path = require('path');
    module.exports = {
        entry: {
            appPart1: './src/appPart1.ts',
            appPart2: './src/appPart2.ts',
        }
        output: {
            path: path.resolve(__dirname, './dist/),
            filename: '[name].bundle.js'
        }
    }


entry: Webpack gets two files for entry
output.path: Webpack outputs both files to ‘./dist’ folder located in our root folder
output.filename: Webpack names both files according to their entry

In most cases you will have only 1 entry file – main.ts, from which Webpack will get to all needed other files.

Loaders


Angular is writter in TypeScript and supports external templates and styles.
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
But the browser alone don`t understand that. So we must get all of this into one(or several if the app is big) JavaScript file/s. We do that by using Webpack Loaders. Here are the most common used with Angular:

TypeScript


     
    {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
    }

HTML


     
    {
        test: /\.html$/,
        use: 'raw-loader'
    }

CSS


    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    }
 

test: File type to look for. We provide a regex expression that will match the required files

loaders/use: The loaders to use
Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document)
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page

Full Example


    'use strict';
    let path = require('path');
    let webpack = require('webpack');
 
    module.exports = {
        entry: './app/main.ts',
 
        output: {
            path: path.resolve(__dirname + '/dist'),
            filename: 'bundle.js'
        },
 
        module: {
            loaders:
            [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
                },
                {
                    test: /\.htm$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                }
            ]
        },
 
        plugins: [
            new webpack.ProgressPlugin(),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                path.join(process.cwd(), 'app')
            )
        ],
 
        resolve: {
            extensions: ['.ts', '.js']
        }
    };
 
Uncategorized
, , , ,

Leave a comment

Understanding How Webpack Works

Understanding How Webpack Works


Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles them into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today

Initial Configuration


For start we need to tell Webpack our application entry and output points
     
    var path = require('path');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, './dist/),
         filename: 'bundle.js
        }
    }
entry: This is the main entry point of our application. This is where our initial loading and application logic will be output.path: An absolute path for the resulting bundle. We use a built-in Node.js function (path) to dynamically create an absolute path, relative to where we are output.filename: The filename of the resulting bundle. This can be anything, but by convention it’s called bundle.js __dirname: This is the directory name of the current file.

Loaders


In most of the occasions our project source files are HTML, CSS , JS/TS. Webpack understands JavaScript from the box, but what about the other file types? Here are the most common Webpack loaders for this files types: TypeScript

     
    {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
    }
test: File type to look for. We provide a regex expression that will match .ts files loaders: The loader to use HTML

     
    {
        test: /\.html$/,
        use: 'raw-loader'
    }
test: File type to look for. We provide a regex expression that will match .html files use: The loader to use CSS

 
    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    }
 
test: File type to look for. We provide a regex expression that will match .css files loaders: The loaders to use. Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document) Important: In order to use this loaders we need to have their dependencies installed. For more info about loaders please visit Webpack Official Page

Plugins


They serve the purpose of doing anything else that a loader cannot do. Here is an example:

     
    plugins: [
        new webpack.ProgressPlugin(),
        new webpack.ContextReplacementPlugin(
            resourceRegExp,
            [newContentResource],
            [newContentRecursive],
            [newContentRegExp]
        )      
    ]
ProgressPlugin: This plugin extracts progress information ContextReplacementPlugin: If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolve relative to the previous resource For more info about plugins please visit Webpack Official Page

Resolve


Here you can change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Example:
    
    resolve: {
        extensions: ['.ts', '.js']
    }
This automatically resolves certain extensions which is what enables users to leave off the extension when importing:
 
    import File from '../path/to/file'
 
For more info about resolve please visit Webpack Official Page

Full Example


    'use strict';
    let path = require('path');
    let webpack = require('webpack');
 
    module.exports = {
        entry: './app/main.ts',
 
        output: {
            path: path.resolve(__dirname + '/dist'),
            filename: 'bundle.js'
        },
 
        module: {
            loaders:
            [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
                },
                {
                    test: /\.htm$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                }
            ]
        },
 
        plugins: [
            new webpack.ProgressPlugin(),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                path.join(process.cwd(), 'app')
            )
        ],
 
        resolve: {
            extensions: ['.ts', '.js']
        }
    };
Uncategorized
, , , , , ,

Leave a comment

jQWidgets 4.5.1

What’s Improved:

– The jqxLayout/jqxDockingLayout “allowClose” setting in is now preserved when pinning tabbedGroups or unpinning autoHideGroups.

What’s Fixed:

– Fixed an issue in jqxNumberInput regarding mobile devices behavior when decimalSeparator is “,”.
– Fixed an issue in jqxScheduler regarding the exactTimeRendering functionality, when an appointment is rendered in 2 days.
– Fixed an issue in jqxScheduler regarding the edit dialog when the dialog is opened when there’s no focused cell.
– Fixed an issue in jqxPopover regarding the showArrowButton property, when it is set dynamically.
– Fixed an issue in jqxGrid regarding the tooltips in Checkbox column.
– Fixed an issue in jqxGrid regarding the clipboard paste functionality.
– Fixed an issue in jqxGrid regarding the toggle arrows display when the grid’s row details and grouping with aggregates features are enabled.
– Fixed an issue in jqxGrid regarding the grouping aggregates rendering logic.
– Fixed an issue in jqxGrid regarding the filter row dropdownlist and “select all” item.
– Fixed an issue in jqxGrid regarding the full row edit when “ESC” is pressed and “updaterow” is defined in the source object.
– Fixed an issue in jqxDataTable regarding the server-side filtering.
– Fixed an issue in jqxWindow regarding the dynamic enabling/disabling of window dragging.
– Fixed an issue in jqxWindow regarding the Tab key navigation after closing modal window.
– Fixed an issue in jqxTabs regarding the setTitleAt method when close buttons are enabled.
– Fixed an issue in jqxRibbon about the animationType: “slide”.
– Fixed an issue in jqxWindow regarding the method “destroy” in Internet Explorer.




Angular 2, AngularJS, ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, Chart, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, jqxDateTimeInput, jqxDock, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxMaskedInput, jqxMenu, jqxNavigationBar, jqxNumberInput, jqxProgressBar, jqxRadioButton, jqxRating, jqxResponse, jqxRibbon, jqxScrollBar, jqxSlider, jqxSplitter, jqxTabs, jqxTooltip, jqxTree, jqxTreeMap, jqxValidator, jqxWindow, PHP, typescript
, , , , , , , , ,

Leave a comment

Bootstrap ASP .NET Core Mvc Tag Helpers

For All major Bootstrap Components and JavaScript plugins, we built ASP .NET Core Mvc Tag Helpers.

That package is completely FREE.

Demos & Download: http://aspcore.jqwidgets.com/bootstrap

ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets
, , , , , , , , , , , , , , , , ,

Leave a comment

Asp .Net Mvc Tag Helpers Docs

New ASP .NET Core MVC Documentation page with Getting started, Styling and Appearance and API documentation pages for all ASP .NET Tag Helpers – asp.net-core-mvc-tag-helpers-documentation/. Each property, method and event on the API page includes a how-to-use ASP .NET example.
ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers

Leave a comment

jQWidgets 4.5.0

What’s New:

– React UI components.

What’s Fixed:

– Fixed an issue in jqxGrid regarding the DateTimeInput editor in Firefox.
– Fixed an issue in jqxGrid regarding the Tab-key navigation when the Grid is in edit mode and the editor is checkbox.
– Fixed an issue in jqxGrid regarding the Esc key behavior when the NumberInput column is in edit mode.
– Fixed an issue in jqxGrid regarding the auto-scroll behavior after editing and when grouping is turned on.
– Fixed an issue in jqxGrid regarding the row details expand/collapse behavior after sorting and filtering.
– Fixed an issue in jqxGrid regarding the filter row’s date range filter display after the grid is re-rendered.
– Fixed an issue in jqxScheduler regarding the columns rendering in timeline views after navigation.
– Fixed an issue in jqxTreeGrid regarding the auto-height calculation after cell editing when autoRowHeight is true.
– Fixed an issue in jqxCalendar and jqxDateTimeInput regarding their destroy method.
– Fixed an issue in jqxMaskedInput regarding the value property during initialization.
– Fixed an issue in jqxChart regarding the tooltip’s z-index.

Breaking changes:

Component selectors for Angular now start with “jqx” instead of “angular”. ASP .NET Tag Helpers now use dash style instead of camel case for creating helpers and setting attributes.
Uncategorized

Leave a comment

jQWidgets 4.4.0

This new release was focused entirely on improving the jQWidgets Angular 2 components and documentation. In this new release, you will also find multiple new examples about angular 2. Below is the list of changes:

– 30+ new examples for Angular 2.
– Angular 2 Web Pack support.
– Initialize jQWidgets Angular 2 Components through attributes.
– Angular 2 ngModel support.


View our Angular 2 Demos.
Angular 2
, ,

Leave a comment

Chart Studio

Chart Studio represents a cloud solution for visual editing and hosting of interactive charts. You can try it on: Chart Studio.

Chart
, , , ,

Leave a comment

jQWidgets 4.3.0

This release brings Angular 2 Components with support for the final Angular 2 version. The updated demos can be found on Angular 2 Components demos.
Major part of the release is the ASP .NET Core MVC Tag Helpers package. During the last few months, we built a .NET library with Tag Helpers for all components. Each ASP .NET Tag helper has the same API members. This means that if you are familiar with the jQWidgets API, you already know how to use this .NET package. If you are not, please refer to the documentation page. The Tag Helpers enable Server-Side code to participate in creating and rendering HTML elements in Razor files. For more information about the package, please refer to: ASP .NET Core MVC Documentation and the Demo page: ASP .NET Tag Helpers.

What’s New:

– Angular 2.0 Final version support.
– ASP .NET Core MVC Tag Helpers.
– ASP .NET Core MVC Bootstrap Tag Helpers.

What’s Improved:

– jqxDateTimeInput, jqxNumberInput Esc key behavior.

What’s Fixed:

– Fixed an issue in jqxTabs regarding the changing of tab titles dynamically. – Fixed an issue in jqxWindow regarding the changing of its content dynamically. – Fixed an issue in jqxProgressBar regarding its text layout. – Fixed an issue in jqxLayout regarding its rendering. – Fixed an issue in jqxRibbon regarding the z-index of its scroll buttons.
Angular 2
,

Leave a comment

ASP .NET MVC Core Tag Helpers

What is a ASP .NET MVC Core Tag Helper?


Tag Helper enables server-side code to participate in creating and rendering HTML elements in Razor files.

What Tag Helpers provide?


In general, HTML-friendly experience. Razor markup using Tag Helpers looks like standard HTML. Front-end designers familiar with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax. ASP .NET MVC Core Tag Helpers make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server.

What is ASP .NET MVC Core Tag Helpers for Bootstrap?


This is a package we built for the community. It provides Tag Helpers for the popular Boostrap framework. The package includes the following list of tag helpers:

  • Alert
  • Badge
  • Breadcrumb
  • Button
  • Carousel
  • Collapse
  • DropDown
  • Input
  • Jumbotron
  • Label
  • ListGroup
  • Media
  • Modal
  • NavBar
  • PageHeader
  • Pagination
  • Panel
  • Popover
  • ProgressBar
  • Tabs
  • Thumbnail
  • Tooltip
  • Well


Demo link: http://aspcore.jqwidgets.com/bootstrap”
Project link: https://github.com/jqwidgets/ASP.NET-Core-MVC-Bootstrap-Tag-Helpers
Installation link: https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers

What additional Tag Helpers to expect soon?



In several weeks, we release ASP .NET Tag Helpers for jQWidgets. It includes Tag Helpers for all the widgets we have. The package will be included in the jQWidgets subscription. Here is how a sample with the Grid’s Tag Helper will look:

@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC Grid Example";
}
<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" autoheight="true" width="850" source="Model">
<jqx-grid-columns>
<jqx-grid-column columngroup="name" datafield="FirstName" width="100" text="First Name"></jqx-grid-column>
<jqx-grid-column columngroup="name" datafield="LastName" width="100" text="Last Name"></jqx-grid-column>
<jqx-grid-column datafield="Title" width="150"></jqx-grid-column>
<jqx-grid-column datafield="Address" width="200"></jqx-grid-column>
<jqx-grid-column datafield="City" width="150"></jqx-grid-column>
<jqx-grid-column datafield="Country"></jqx-grid-column>
</jqx-grid-columns>
<jqx-grid-column-groups>
<jqx-grid-column-group name="name" text="Name"></jqx-grid-column-group>
</jqx-grid-column-groups>
</jqx-grid>

Demo link: Grid Tag Helper

ASP .NET, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Widgets, jQWidgets
, , , , , , , , , , , , , , , , , , , , , ,

Leave a comment