Top Angular blog posts from November 2020
It’s time for the last recap of top Angular blog posts for the year. We hope you’ve enjoyed revisiting these with us each month!
Version 11 of Angular Now Available
We can’t not kick off this month’s recap with Mark Techson’s announcement of the release of Angular 11 and overview of its new features.
The latest version provides a lot of really great updates. Actual updates to the framework’s code include automatic font inlining, Component Test Harnesses, optimized reporting and logging, an updated Language Service preview, updated HMR support, experimental support for webpack 5, faster builds, and updates to linting.
Besides these, there are also a few more general updates regarding Angular 11 - namely, updates on the Operation Byelog and the framework’s roadmap, as well as removing support for older versions of IE and certain deprecated APIs.
Read more about what’s new in Angular 11
Angular 11 - Towards the Type Safety
Next up, we have another post about the latest release of Angular, in which Santosh Yadav takes an even more detailed look at the updates included in version 11.
He starts with a section on core’s new features: support for lazy loading with named outlets and support for webpack 5. He continues with an overview of the deprecations and breaks, then follows that up with the updates to the Angular CLI and Angular components.
Ultimately, as Santosh points out, the main advantages of this new version are improved type safety and the work on the Angular backlog, which was also highlighted in Mark’s post.
Read more about improved type safety in Angular 11
5 Tips to Improve Ionic Angular App Performance
We’re moving on with a post by Matt Netkow of Ionic in which he shares 5 tips on optimizing the performance of Ionic Angular applications, adopted from a recent talk by Stephen Fluin and adapted to the application Ionifits. Matt points out right away that applying the tips improved the app’s Lighthouse score by about 20 points.
The 5 tips he goes through are: reducing bundle size with source-map-explorer; configuring size budgets; splitting up the app into modules for native lazy loading; keeping Angular regularly updated with the ng update command; and reducing build times by adding a Browserslist file.
Read more about improving Ionic Angular app performance
Tutorial: Getting Started with Webpack Module Federation and Angular
We continue with Manfred Steyer’s tutorial on using webpack 5’s Module Federation feature together with the Angular CLI and the module federation plugin. He recommends beginning with cloning the starterkit for the tutorial and inspecting its contents, specifically the shell and the microfrontend, mfe1, taking care to use yarn for installing dependencies to get all the features.
The second step is activating and configuring module federation, then trying out the functionality before switching to dynamic federation, which allows the shell to load the microfrontend dynamically. Manfred finishes the tutorial with a detailed guide to sharing a library of your monorepo, and provides some additional resources in the closing.
Read more about module federation in Angular
Declarative, Reactive, Data and Action Streams in Angular
In the next post on our recap for November, Chandler Baskins explores working with declarative data streams and reactive data streams with action streams in Angular. He begins by going over a basic way of fetching data from a server in Angular, with a simple method.
In the next section, Chandler then briefly presents the concept of “declarative” programming and continues with using the approach to declare a data stream, also showing how to use these data streams. Finally, he takes a look at reactive data streams with Action Streams, which leverage RxJS Subjects and allow users to modify the data in the application.
Read more about data streams in Angular
Angular: Create A Lazy Loaded Tailwind Modal
This post by David Dal Busco on dev.to takes you through the creation of a lazy loaded Tailwind modal dialog in an Angular application. You first need to add Tailwind CSS to the app, which David solves with the Tailwind schematic provided by ngneat.
The next step is to create a service for opening and closing the modal, then to create a module for initializing the modal container, using Angular’s ng-content to make it a generic container.
With the service and the container completed, you’re now able to create any kind of modal; David uses the example of a dialog where the user submits their username for a newsletter, which is lazy loaded and can be opened and closed thanks to the service.
Read more about using a Tailwind modal in Angular
Create a directive for free dragging in Angular
Nearing the end of November’s recap, we have a post by Dharmen Shah explaining how to create an Angular directive that enables free dragging of elements without using any third-party libraries.
He starts off by creating a basic directive for the dragging functionality, but this still needs some improvements to also allow users to perform other actions to the element besides just dragging it, so he also adds support for a drag handle, which enables actions such as selecting the element’s text.
The final step is to add support for dragging boundary to prevent the user from dragging the element outside of the view, and you have a smoothly functioning dragging functionality built solely with Angular.
Read more about creating a dragging directive in Angular
Migrating and configuring Eslint with Angular 11
We’re closing this month’s list with another Angular 11-related article, this one by Giovanni Sarciotto detailing how to migrate from TSLint to the improved ESLint in an application using the latest version of Angular.
Migration is made using the convert-tslint-to-eslint schematic, which will adjust your TSLint rules to match ESLint. Giovanni warns to pay close attention to the terminal output for any rules that can’t be properly matched or may need additional dependencies.
Once this is done, you can begin customizing your ESLint configuration. In a bonus section, Giovanni also shows how you can integrate it with the Prettier code formatter.
Read more about migrating to ESLint in Angular 11
Thanks for reading! Our team wishes you happy holidays and a great start to the (hopefully more optimistic) new year.
