Generating Custom Code with the Angular CLI and Schematics

Since some versions, the Angular CLI uses a library called Schematics to scaffold building blocks like components or services. One of the best things about this is that Schematics allows to create own code generators too. Using this extension mechanism, we can modify the way the CLI generates code. But we can also provide custom collections with code generators and publish them as npm packages. A good example for this is Nrwl's Nx which allows to generated boilerplate code for Ngrx or upgrading an existing application from AngularJS 1.x to Angular.These code generators are called Schematics and can not only create new files but also modify existing ones. For instance, the CLI uses the latter to register generated components with existing modules.In this post, I'm showing how to create a collection with a custom Schematic from scratch and how to use it with an Angular project. The sources can be found here. [Mehr]

  • 10. September 2017

angular-oauth2-oidc 2.1 released

Over the last weeks, I've worked on version 2.1 of my OpenId Connect (OIDC) certified library angular-oauth2-oidc which allows for implementing Authentication in Angular using external Identity Providers that support OAuth 2 or OIDC.Here are the added features ... [Mehr]

Clever white space handling for better performance in Angular

Although tuning an application's performance can be difficult, sometimes all we need to do is laying back and waiting for the next version of the used framework. This especially holds true for Angular as the Core Team is working constantly on improving things under the hoods. A good example for this is the conciser code the Angular Compiler emits beginning with Version 4 or the Angular Bundle Optimizer that transforms code to make it more treeshakable.On more of this optimization techniques landed with 5.0.0-beta.4 about two weeks ago. It allows the compiler to remove unneeded (consecutive) white spaces from text nodes and to remove even whole text nodes that only contain white space characters. This leads to less code emitted by the AOT compiler and therefore to smaller bundle sizes as well as faster start up times.In this post I'm describing how to use it, which performance gains I measured when applying to an example application as well as how this approach works under the covers. The example application I've used for this can be found in my GitHub repository. [Mehr]

  • 15. August 2017

Announcing angular-oauth2-oidc, Version 2

Today, I've released a new version of the angular library angular-oauth2-oidc, which allows for implementing token-based Security using OAuth2/ OpenId Connect and JWTs with Angular.It provides silent refresh, events and is able to directly validate the signature of received tokens. [Mehr]

The Angular Build Optimizer under the Hoods

In my last article, I've shown that the Angular Build Optimizer transforms the emitted JavaScript Code to make tree shaking more efficient. To demonstrate this, I've created a simple scenario that includes two modules of Angular Material without using them. After using the Bundle Optimizer, the CLI/ webpack was able to reduce the bundle size by about the half leveraging tree shaking.If you are wondering how such amazing results are possible, you can find some answers in this article. [Mehr]

Shrinking Angular Bundles with the Angular Build Optimizer

Beginning with version 1.3.0-rc.0, the Angular CLI makes use of the Angular Build Optimizer. This is a nifty tool that transforms the emitted JavaScript code to make tree shaking more efficient. This can result in huge improvements regarding bundle size. In this post I'm describing some simple scenarios that show the potential of this newly introduced tool. [Mehr]

Directly upgrading from AngularJS 1.x to Angular without preparing the existing Code Base

When upgrading from AngularJS 1.x to Angular (2/4/5 etc.), we usually prepare our AngularJS 1.x code base first. This can involve leveraging new AngularJS 1.x techniques like components. Additionally, introducing TypeScript as well as module loaders like SystemJS or webpack are further tasks to prepare the existing code. The goal behind this is to draw near Angular in order to allow a better integration.But in some situations preparing the existing code is too costly. For instance, think about situations where we just want to write new parts of the application with Angular without the need to modify much of the existing AngularJS 1.x code. When this holds true for your project, skipping the preparation phase could be a good idea.This post shows step by step, how this approach can be accomplished. Like the official and well written upgrading tutorial which includes preparing the code base, it upgrades the popular AngularJS 1.x Phone Catalog Sample. [Mehr]

  • 3. Juni 2017

Shrinking Angular Bundles with Closure

Closure is said to be the most sophisticated JavaScript compiler available today. Its advanced optimization mode goes far beyond the tree shaking capabilities of other tools and allows for shrinking bundles to a minimum. Google uses it to improve the performance of its own products, like Google Docs and even Microsoft is using it meanwhile for Office 365. However, its considered to be an expert tool and therefore difficult to configure. In addition to that, it assumes that the underlying JavaScript code has been written in a specific way.Currently, the Angular team is working hard on making Angular work together with Closure as well as with its build tool Bazel. There are some first examples available, e. g. the Example Alex Eagle from the Angular Team created.This post uses the mentioned example to show how to use the closure compiler as well as the advantages it brings regarding bundle sizes. Furthermore, this post explains how to add own and existing packages to a Closure based project. [Mehr]

  • 10. Mai 2017

Using Angular and AOT with Webpack

The Angular CLI provides AOT compilation out of the box. Under the hoods, it uses the package @ngtools/webpack which provides a loader for compiling TypeScript as well as a Plugin for AOT. One can easily use these mechanisms directly with webpack. [Mehr]

  • 7. März 2017

Server Side Rendering with Angular

As server side rendering is considered a strategic feature for Google's SPA-Flagship, the product team decided to include a refactored version directly into the framework. Beginning with Angular 4, this version is available. In this article I'm describing the necessary steps to extend an existing Angular 4 application with server side rendering. [Mehr]

  • 1. Februar 2017

5 things you wouldn't necessarily expect when using AOT and Tree Shaking in Angular

AOT speeds up the application especially the startup because templates are already compiled during build. In addition to this, tree shaking reduces the needed file size by removing unused code. But there are some things, one wouldn't necessarily expect. This article presents five of them, we discovered and researched when working with it [Mehr]

  • 3. Januar 2017

New Library Version: Authentication and Authorization for Angular with OAuth 2 and OIDC

In the last days, I've updated my lib that allows to use OAuth 2 and OpenId Connect (OIDC) together with Angular 2 to implement modern auth scenarios. In order to align with the new naming conventions (#JustAngular) it is called angular-oauth2-oidc now. It can be downloaded via npm. Same examples showing how to use it can be found in the npm repository. The next sections describe the new features. [Mehr]

  • 2. Dezember 2016

Sticky Routes in Angular 2.3+ with RouteReuseStrategy

Beginning with Version 2.3 (and the corresponding Router Version 3.3), Angular will support sticky routes. Such routes preserve the current component's state when they are deactivated, so that it is still available when it is re-activated later. For this, the application can define its own Strategy for reusing components. [Mehr]

  • 15. November 2016

Using ngUpgrade with Angular's AOT compiler to optimize performance

ngUpgrade which is included in Angular 2+ (hereinafter just called Angular) allows for the creation of hybrid applications that contains both, AngularJS 1.x based and Angular 2+ based services and components. This helps to migrate an existing AngularJS 1.x application to Angular 2+ step by step. The downside of this approach is that an application needs to load both versions of Angular.Fortunately, beginning with Angular 2.2.0 which came out in mid-November 2016, there is an implementation of ngUpgrade that allows for ahead of time compilation (AOT). That means that the size of the Angular part can be reduced to the constructs of the framework that are needed by using tree shaking.In this post, I'm showing how to use this implementation by an example I've prepared for ngEurope. It contains several components and services written with AngularJS 1.x and Angular [Mehr]

  • 30. Oktober 2016

AOT in Angular 2 mit Lazy Loading kombinieren

In seinem Blogbeitrag Angular 2 AoT Compilation with webpack beschrieb Suguru Inatomi diese Woche, wie man mit webpack und Angular 2 eine AOT-Kompilierung durchführen kann. Dazu nutzte er das Paket @ngtools/webpack, welches im Rahmen der CLI entwickelt wurde und ohne Änderungen am Source Code lediglich durch eine Anpassung der webpack-Konfig von JIT auf AOT umstellt.Ich habe versucht, diese Idee auf mein Beispielprojekt anzuwenden und sie mit Lazy Loading zu verknüpfen ... [Mehr]

  • 2. Oktober 2016

Optimizing Performance with Preloading and the new Angular Router [English Version]

The new Router for Angular allows for lazy loading of modules. This way, the startup performance of an Angular based SPA can be optimized. At AngluarConnect 2016 in London, the Angluar mastermind Victor Savkin presented a preloading approach which goes beyond this: It uses free resources after the start of the application to load modules that might be requested via lazy loading later. If the router actually needs those modules later, they are available immediately. [Mehr]

  • 30. September 2016

Performanceoptimierung mit Preloading und dem neuen Angular Router

Der neue Router für Angular erlaubt das verzögerte Laden (Lazy Loading) von Modulen. Auf diese Weise lässt sich die Startgeschwindigkeit einer Angular-basierten SPA optimieren. Das von Angular-Mastermind Victor Savkin auf der AngularConnect 2016 in London vorgestellte Preloading geht darüber hinaus, indem es eine weitere Performanceoptimierungen erlaubt: Es nutzt freie Ressourcen nach dem Start der Anwendung zum Nachladen von Modulen, die später per Lazy Loading angefordert werden könnten. Werden der Router diese Module später tatsächlich benötigt, stehen sie augenblicklich zur Verfügung. [Mehr]

Weitere Schulungen

Angular Schulung: Strukturierte Einführung

Lernen Sie in dieser interaktiven Schulung anhand einer Beispielanwendung den Einsatz von Angular für Ihre erfolgreichen Projekte kennen. Sie durchdringen die Hintergründe und bauen von der ersten Minute an auf Best Practices auf.


Advanced Angular: Enterprise-Anwendungen und Architektur

In dieser Schulung erfahren Sie alles für die Entwicklung großer Anwendungen mit Angular: Mono-Repos, Micro-Apps, State Management, Performance und mehr


Angular: Strukturierte Einführung

Seit der Ankündigung von Angular (2+) fragen sich Entwicklungs-Teams, welche Migrationspfade für AngularJS-1.x-Anwendungen vorliegen werden. Das im Lieferumfang von Angular enthaltene ngUpgrade bietet eine Antwort darauf. Es erlaubt einen Parallelbetrieb von AngularJS 1.x und Angular (2+) und stellt somit die Grundlage für eine schrittweise Migration dar.


Progressive Web-Apps mit Angular

Progressive Web Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser APIs, wie Service Worker, setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push-Notifications. Diese Schulung zeigt anhand eines durchgehenden Beispiels was sich genau hinter diesem neuen Konzept verbirgt, wie solche Anwendungen mit Angular entwickelt werden und wie Sie in Ihren Projekten von den dahinterstehenden Ideen profitieren.


Reaktive Architekturen mit Angular und Redux

Dieses interaktive Seminar vermittelt, wie Sie reaktive Anwendungen mit Angular entwickeln können.



TypeScript gibt Ihnen alle Möglichkeiten der neuen JavaScript-Standards und zusätzlich ein statisches Typsystem, das dabei hilft, Fehler möglichst früh zu erkennen. Außerdem ist TypeScript die Grundlage für Angular. In diesem interaktiven Seminar lernen Sie diese mächtige Sprache anhand einer Fallstudie kennen.