Rollup is currently working on support for code splitting. In this post I will use this new, experimental, feature to bundle a mid size Angular application.
In this post I will evaluate the most common Angular bundlers to see how they compare in terms of bundle size.
In my demo project I have examples of how to bundle Angular applications with pretty much any bundler under the sun. Today I added Parcel to the collection. Let’s see how it compares to one of my existing Webpack configurations.
Today I will test if there is a noticeable change in Angular bundle size from using ESM2015 bundles vs ESM5 bundles when using Rollup.
In this post I will take a look at the new downgradeModule in ngUpgrade.
In this post I will show how to use @angular-devkit/build-optimizer to further optimize Angular Webpack builds.
One of the really cool things in Angular 5 is watch mode for the ngc (AoT) compiler. In this post I will look at how this works.
This post is a write-up of an experiment where I measure the impact of removing whitespace from Ahead of Time Compiled (AoT) templates.
In this post I will show how to mock http requests in unit tests using HttpClient.
In this post I will do a comparison between Webpack 3 and Webpack 2.
In the following post I will show that you can shrink the footprint of your Angular Webpack build by switching to ES6 and Babili.
In this article I will discuss some of the alternatives for preparing an Angular application for production. I will look at several different approaches, and highlight the pros and cons.
In this post I will show how to optimize NgUpgrade through lazy loading.
In this post I will show a potential pitfall from combining ng-upgrade with long running intervals.
In this post I will show one of the pitfalls of bundling in Angular.
In this post I will discuss an experiment where I set out to create the smallest Angular application possible using Angular 4-rc.5.
In the following post I will show how to implement pub/sub in an NgUpgrade application.
In this post I will talk about some of the issues with Tree Shaking of decorators.
I just updated my Angular samples to version 4 of Angular. Since version 2 the Angular team has made a few tweaks to the Angular distribution format. In this post I will point out a few of the differences.
In the following post I will show how to combine the Angular router with ui-router in an Ng-Upgrade application.
In this post I will discuss different ways to generate Angular application bundles. I will show examples using Rollup, Webpack and the Closure compiler (ADVANCED_OPTIMIZATION).
In this post I will examine how Angular applications grow in size when moving beyond the “Hello World” baseline example.
In this post I will show how to integrate Firebase with an Angular application.
In this post I will show how to use Angular Universal with Sql Server.
I have created a demo project with lots of live samples to support my articles.
In the following post I will show how to combine i18n translations with Ahead of Time Compilation (AoT).
Many existing Angular 1 projects are looking to NgUpgrade to help with the transition to post 1.x versions of Angular. In this post I will show how to create an optimized Angular bundle for the NgUpgrade scenario.
In this article I will show how to use the ahead of time compiler (AOT) in Angular to improve performance.
Angular code is decoupled from the underlying runtime environment, so in theory our code could run on any type of host. In this post we will show how to use NativeScript in combination with Angular to create a native app.
One really cool thing about Angular is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running an Angular application in a web worker.
I this post I will show how to use Angular Universal to generate Angular applications on the server.
In this article I will show how to create a lazy loaded treeview using RxJs Observables.
In this post I will explain the purpose of the new @Input and @Output annotations in Angular.
In this article I will attempt to use the Redux pattern in an Angular component.
In this article I will show how to use dynamic forms in Angular.
One of the most common criticisms of Angular 1.x is the potentially inefficient change detection algorithm tied to the digest cycle. In this post I will discuss some of the major improvements to change detection in Angular.
Angular is now a lot less forgiving about undefined references in binding expressions than Angular 1.x is. In this post I will show how to use the safe navigation operator to safe guard against undefined references in view templates.
In the following article I will show how to use ComponentFactoryResolver in Angular to insert components dynamically into the DOM
In the following post I will show how to use the built in form functionality in Angular. Through an example I will wire up some common controls and show how to do data binding and validation in the form.
In this article I will cover some of the details of Angular dependency injection and highlight some of the changes from Angular 1.x.
Capturing user input is an important part of web development, so in the following post I will demonstrate how to use common input controls like textbox, checkbox and radio button in Angular.
In the following post I will describe how to integrate jQuery code with Angular.
Most Angular developers are probably already familiar with the $timeout service. This service serves an important role in Angular 1.x, so today I decided to go digging for its counterpart in the new Angular world.
I have over the past months spent quite a bit of time working with Angular 2.0 by writing sample components and going through the Angular 2.0 source code. At this point I have decided to write down some of my thoughts around my experiences with Angular 2.0. Keep in mind, these are just my own personal experiences, so I am very interested in hearing from other developers who might have totally different views on this.
I am continuing my series of POC components using Angular. Today I have decided to create a virtualized spreadsheet component. The idea is to make a highly scalable grid by limiting the number of rendered DOM rows to a fixed number – backed by a virtual data source. The point of all this is not really to recreate Excel, but to play around with some new Angular concepts.
The Angular team has just announced that the convenience wrappers success and error for promise handling have been deprecated. This is not surprising as the success/error API is not only non standard, but might also lead to unexpected results. In this post I will highlight some of the potential pitfalls from using success.
Being able to make http requests is a very important part of a single page application. In this post I will show a quick demo of how to make requests using the Angular http module.
In this post I will give an introduction to the new Angular router.
Angular includes a directive that tells Angular to not compile or evaluate bindings in the contents of a specified DOM element. In this simple example I will demo how to wire this up.
Angular is probably still the undisputed heavy weight champion of JavaScript frameworks, but other frameworks are emerging as solid alternatives. In this post I will share some of my experiences from working with Angular on large enterprise projects.
I am continuing to experiments with Angular. In this article I will demonstrate how to create a grid component using Angular.
In this post I am continuing my series of Angular articles by showing how to set up two way binding between input elements and model.
In this post I will demonstrate how to create a simple treeview using Angular and TypeScript.
In this article I will provide some details about how $q promise chaining works in Angular.
In a previous post I showed how to combine RequireJS AMD with regular Angular DI. In this post I will demonstrate how to enhance this further by adding ocLazyLoad to support true on demand lazy loading of resources.
The purpose of this post is to demonstrate how to use RequireJS AMD in combination with regular Angular dependency injection.
Despite lack of browser support, ES6 is beginning to leave its mark on modern web development. We still have to transpile ES6 code down to ES5, but improvements in transpilers and automation make the process almost seamless. In this post I will demonstrate how to benefit from ES6 JavaScript in Angular 1.x.
The bindToController property makes it really easy to tie a directive's isolate scope to the controller when using controllerAs. BindToConroller effectively binds the scope properties to the controller, but how can we simulate this in a unit test without having to include the directive in the test? In this post I will show an example of how to do it.
Angular 1.3 introduced the ability to bind validation expressions using the ng-pattern directive. Here is a quick description of how to use it.
In this post I will talk about a few of the benefits of the ControllerAs syntax in Angular.
Caching typically translates into an instant performance win in most applications. In this post I will demonstrate how to add basic cache handling to promise based http calls.
Lately there has been a lot of buzz about React. People are already comparing it to Angular – another very popular framework. In this post I will look at some of the differences between React and Angular.
I have always advocated in favor of decoupled object models for testability and flexibility, but what does that really mean? In this post I will, through an example, demonstrate what I mean by a decoupled object model and highlight the major benefits of the approach.
A while back the Angular team made an announcement about their plans for the next generation of Angular – Angular 2.0. The presentation revealed changes that represent a big departure from the current 1.x version. Developers everywhere responded with a mixture of shock and disbelief after learning that core concepts of Angular 1.x would be dropped in 2.0. In fact it almost seemed as if the team had decided to create a brand new framework, but still name it Angular for brand recognition. However, in this post I want to explain why I think the new Angular approach is the right one.
Angular is a great framework for composing complicated data driven user interfaces. Most of the time Angular does a good job of balancing flexibility and performance, but in large complicated UIs, performance may become an issue if you're not careful. In this post I will discuss some effective techniques that may help you tune your application.