This article shows how to load Web Components on demand. For this, it demonstrates two approaches: Lazy Loading and loading external components. [Mehr]
Web Components can be reused with each framework and dynamically adding new Web Components to a page is just a matter of creating DOM nodes. In this post, I'm using this idea to build a dynamic dashboard. [Mehr]
Angular depends on zone.js for change detection and in most cases we don't want to force customers of our Web Components into using it. In this short article, I explain how to get rid of zone.js and how to deal with the consequences. [Mehr]
Treeshakable providers come with a new optional API that helps tools like webpack or rollup to get rid of unused services during the build process. Besides smaller bundles, this innovation also allows a more direct and easier way for declaring services.
In this post, I'm showing several options for using this new API and also point to some pitfalls one might run into. [Mehr]
One approach for creating SPA-based clients for microservice environments is loading several Web Components into a page. Using an example, this post shows one way to implement this idea. For this, it leverages Angular Elements which allows to compile Web Components out of Angular projects. [Mehr]
The CLI command ng update allows migrating to a newer version of an installed library. For this, it executes schematics to adopt existing applications to changes. [Mehr]
Table of Contents
This blog post is part of an article series.
Part I: Generating Custom Code With [Mehr]
In my two previous blog posts, I've shown how to leverage Schematics to generate custom code with the Angular CLI as well as to update an existing NgModules with declarations for generated components. The latter one was not that difficult because this is a task the CLI performs too and hence there are already helper functions we can use.
But, as one can imagine, we are not always that lucky and find existing helper functions. In these cases we need to do the heavy lifting by ourselves and this is what this post is about: Showing how to directly modify existing source code in a safe way. [Mehr]
People ask me on regular basis how to use SPAs, esp. Angular-based ones, in a microservice-based environment. The need for such microfrontends is no surprise, as microservices are quite popular nowadays. The underlying idea of microservices is quite simple: Create several tiny applications -- so called microservices -- instead of one big monolytic applications. This leads for instance (but not only) to smaller teams (per microservice) that can make decisions faster and chose for the "best" technology that suites their needs.
But when we want to use several microservices that form a bigger software system in the browser, we need a way to load them side by side and to isolate them from each other so that they cannot interact in an unplanned manner. The fact that each team can use different frameworks in different versions brings additional complexity into play.
Fortunately, there are several approaches for this. Unfortunately, no approach is perfect -- each of them has it's own pros and cons.
To decide for one, a software architect would evaluate those so called architectural candidates against the architectural goals given for the software system in question. Typical (but not the only) goals for SPAs in microservice-based environments are shown in the next section. [Mehr]
Even though the word iframe causes bad feelings for most web devs, it turns out that using them for loading SPAs in a micro service based environment -- aka micro frontends -- is a good choice. For instance, they allow for a perfect isolation between clients and for a separate deployment. Because of the isolation they also allow using different SPA frameworks. Besides iframes, there are other approaches to use SPAs in micro service architectures -- of course, each of them has their own pros and cons. [Mehr]
In my last blog article, I've shown how to leverage Schematics, the Angular CLI's code generator, to scaffold custom components. This article goes one step further and shows how to register generated building blocks like Components, Directives, Pipes, or Services with an existing NgModule. For this I'll extend the example from the last article that generates a SideMenuComponent. [Mehr]
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]
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]
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]
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]
If you are wondering how such amazing results are possible, you can find some answers in this article. [Mehr]
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]
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]
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]