Kimserey's blog

Moving from chaining to piping in rxjs 6.x Last month I updated all my NPM packages and realised that everything was broken! The reason why was that rxjs decided to move out of extensions on observable in favor of pipable functions from 5.x to 6.x. A major breaking change where majority if not all codebase built using rxjs needs to be changed. Today we will explore the reasoning behind this change. Reasons Example of migration Learnings 1. Reasons The reasons given on the official documentation are: Any library importing the patch operator augmenting the observable prototype would also augment it for all consumers. For example, when a library imports map extension from import 'rxjs/add/operators/map' , it makes map available for all code importing the library itself. This could bring confusion due to the inconsistent way of importing extensions. Some places would not need to important map (those were the library is used) while in other place of the code we would ...

Create a Navigation loading bar for Angular with PrimeNG In Angular, it is common practice to execute commands prior routing a page using guards and resolvers. Guards prevent the routing from occuring until the condition turns to true and resolvers prevent the routing from occuring until the data is returned. Those actions can take time to complete and during the time being, the component will not load leaving the user with an impression of unresponsiveness. Today we will see how we can implement a navigation loading bar for Angular using PrimeNG progress bar component in two parts: Setup an Angular project PrimeNG Progress bar If you are unfamiliar with the Angular router, you can have a look at my previous blog post explaining the feature of the router https://kimsereyblog.blogspot.com/2017/06/how-to-use-angular-router.html . 1. Setup an Angular project We start by creating a project and installing PrimeNG. npm install primeng --save npm install primeicons --save Next we a...

SignalR Core with Angular Last week we saw how to Configure SignalR and get a server notifying a client built as Razor page via Websockets . We completed the post by having a fully functional backend setup with SignalR and authentication done via Resource Owner Password. Today we will see how we can connect to SignalR hub from an Angular application and demonstrate how we can authenticate in five parts: SignalR server Setup an Angular application Connect to SignalR hub Send messages Authentication 1. SignalR server We won’t be describing the server here, instead we will take from where we left in my previous blog post with the code fully available on my Github https://github.com/Kimserey/signalr-core-sample/tree/master/Example . Get the repository and run signalr-core-sample/Example . It will run a server on http://localhost:5000 with a SignalR hub on /chathub and Identity server configured with a client my-app setup with Resource owner password flow. 2. Setup an Angul...

HTTPS with SSL for Nginx, Kestrel and Angular Internet is moving toward secure connections whereby HTTPS is a priority. Browsers are now warning users when navigating to non secured website. With this movement, Kestrel and ASPNET Core have adopted the mentality of security by default rather than security when needed. HTTPS will now be the default and HTTP will be a necessity due to implementation constraints. Together with Lets Encrypt and ACME protocol, we do not have excuses for not implementing an SSL connection. Setup the example SSL self signed certificate for Nginx SSL self signed certificate for Kestrel SSL self signed certificate for Angular CLI 1. Setup the example We assume that our environment is on Ubuntu, with nginx and dotnet installed. If you are on Windows, you can install the linux subsystem with Ubuntu 16.04 as describe on my previous post . This will give access to most of the features of Ubuntu via a bash prompt. To start we create a HelloWorld applicatio...

Async pipe versus Subscribe in Angular Over the past year, working in companies using Angular, many times have I been in situations where I was asked to explain the differences between async pipe and .subscribe in Angular. More precisely explain my standpoint which is to always use async pipe when possible and only use .subscribe when side effect is an absolute necessity . The challenge in explaining this comes to how to convince without giving an hour boring lesson of why side effects in logic are hard to maintain and how prematured .subscribe forces developers to make unecessary side effects. So today I would like to talk about that and provide explanations which I hope will help to understand which to use. This post will be composed of three parts: Observable and Rxjs Subscribe function Async pipe Best practices 1. Observable ans RxJS First to understand the context, we need to understand what is an observable. 1.1 Observable Observable is an abstraction of asynch...

Params inheritance strategy with Angular Router Few weeks ago I discussed about Angular router, how we could make sure our data are loaded before accessing a component. If you aren’t familiar with Angular router, I suggest you have a look at my previous blog post where I introduced the router . The example was loading data from the store (ngrx store) to check if data were loaded. But it would have been difficult if we needed to load data from the route params. Today we will see the problem faced when taking params from the route and how it can be resolve with a newly introduced feature in Angular router since 5.2.x. 1. Getting data from the route params 2. paramsInheritanceStrategy 1. Getting data from the route params To get data from the route params we take can use the ActivatedRouteSnapshot or the .snapshot property of the ActivatedRoute and use the .params property. Suppose that we have a route /test/:myKey , and we navigate to /test/hello , we could do the following: c...

Setup environments for your AspNetCore backend and Angular frontend Last week we saw how we could use angular cli and dotnet cli to pack and publish our application with simple commands. The application had no settings therefore there wasn’t a need to differentiate multiple deployments. But if we do need different settings, how should we handle it? Today I will amswer this question by explaining how we can setup targets and environments for our application. This post will be composed by three parts: 1. What is the difference between a target and an environment 2. Setup target and nvironment settings for AspNetCore app 3. Setup target and environment settings for Angular CLI 1. What is the difference between a target and an environment A target refers to a target build. A target build is a set of configurations used to build the application. For development, the optimization is usually disabled as build time is more important than the optimization of code for example which would sl...

Publish Angular application with Angular CLI and AspDotNet Core A few months back I showed how to bootstrap an Angular application using Angular CLI . Apart from bootstrapping and serving, Angular CLI is also capable of packing the application and get it ready to be published in order for us to serve it on our own webserver. Today we will see how the process of publishing can be done in three steps 1. Prepare the project for packing 2. Create a host 3. Publish the application 1. Prepare the project for packing In order to ease the understanding, we start by separating our client Angular application and Host application. The client will go into /client while the host into /host . Here a preview of how the structure will look like: - MyApplication | - /.git | - /client | - /e2e | - /node_modules | - /src | - ... | - /host (nothing here yet) | - /Host | - MyApplication.Host.sln In order to create t...

Prime NG data table for Angular In every web application there is a need to display data in a tabular form. If the amount of data is small, a simple combination of HTML with Bootstrap is enough. But when the data is large, or more advanced functionalities are needed like sort or pagination, a more elaborated table needs to be used. If you followed me, you must have noticed that I am a huge fan of Prime NG and once again, Prime NG saves us the burden of implementing a complex data table by providing an Angular component fully featured. Today we will see how to use it in 3 parts: 1. Use Prime NG data table 2. Customized cell template 3. Pagination All the source code for this example is available on my GitHub . 1. Use Prime NG data table 1.1 Basic usage Start by installing Prime NG. npm install primeng --save Then in your main app module, register the DataTableModule to get access to its components. @NgModule({ imports: [ ... other imports DataTableModule ], ... o...

Validation in ASP NET Core and Angular Validation is an important part of any application. There are two parts where validation is required, the API level and the frontend. The API validation is meant to prevent any malformed input to corrupt our data while the frontend validation is meant to guide the user to fill in a form by providing interactive feedback on her input. ASP NET Core for the backend and Angular for the frontend both ship with validation mechanisms fulfilling are requirements. Today we will see how we can implement validation in ASP NET Core using data annotation and inline validation with Angular reactive form. This post will be composed by 2 parts: 1. Implement validation for ASP NET Core 2. Implement inline validation for Angular form 1. Implement validation for ASP NET Core In ASP NET Core, validation can be implemented using data annotation. On each call, parameters are tested against the annotation and the ModelState property is filled up. When any of the p...

Implement a breadcrumb in Angular part 2 Last month I showed how we could build a breadcrumb with PrimeNG in Angular (you can read it as appetizer if you are interested in implementing a breadcrumb bar). In my previous post, I suggested to have a service BreadcrumbService which would hold the crumbs and get updated in ngOnInit of the component used on the route. Since then, I always was uncomfortable with this approach as this meant that my component would know the existance of a breadcrumb, because it updates it, while I always believed it should not know and not care . This led me to figure another way to abstract away from the component the concept of breadcrumb by combining guard, resolver and route. It can be achieved with the following 3 steps: 1. Register your crumbs as route data 2. Create a guard which ensure that the crumbs are set on the service before page is shown 3. Change the breadcrumb service to use a ReplaySubject instead of Subject 1. Register your crumbs as ...