Top Angular blog posts from April 2020
We’re back with another recap of some of the best Angular-related blog posts from last month. Check it out and revisit some of the top posts from April, or discover something useful that you may have missed.
The difference between the canActivate and canActivateChild guards
The first post to make it on our list this month, written by Tim Deschryver, takes a look at the difference between canActivate and canActivateChild, which are guards that determine if a certain route can be activated. As the names suggest, the former only executes with a parent route, and the latter when navigating to a child route or between child routes.
Besides the code and the different use cases, Tim also provides some nice to knows. For example, since the parent component gets created first, canActivate will be called first. And, if this guard returns a falsy value, canActivateChild will then not be called at all.
Building and consuming Angular Elements as Web Components
Next up, we have a post by Chris Williams about building and bundling Angular web components, and some ways of consuming Angular elements that Ivy enables.
The post begins with comparing the benefits and drawbacks of the two different approaches to building Angular elements (packaging runtime with lib components, and building runtime as externals), then follows up with the two different approaches to creating and consuming web components using Ivy.
There are some catches with both of them, but Chris does a great job of covering all bases and provides solutions for them, as well as listing some additional limitations. Give his whole post a read to find out more.
Implement file upload with Firebase Storage ? in our Angular App: The simple way
We love all kinds of pets here at Agiledrop, so a post about an Angular app for uploading cute cat photos seemed like a perfect fit for our list. This is actually part two of the series, with part one by Siddharth Ajmera covering the setup of Firebase, the setup and implementation of the Angular app, and routing, all with Google sign-in.
Part two by Martina Kraus then focuses on actually implementing file upload with Firebase Storage in that Angular app. The key things here are using the ReactiveFormsModule and setting up the Firebase Storage to which the images will be uploaded.
The Angular Developer Survey
Moving on, we have a post about the 2020 Angular Developer Survey, published by Stephen Fluin. Not that much to say here: Stephen provides some background information on this annual survey, as well as some of the key findings from the past few surveys in terms of developers’ priorities.
It’s no surprise that documentation and runtime performance are among the key features, with topics such as components and support also of major importance to developers. The survey is currently still open, so, if you want your voice to be heard, have a look at Stephen’s post and take the few minutes to give your input!
The Microfrontend Revolution – Part 2: Module Federation with Angular
The fifth post on April’s list focuses on module federation in Angular, which enables the implementation of microfrontends, a relatively recent software trend which is gaining in popularity. Again, this is the second part of a two-part series on Module federation, the first part focusing on Webpack and this one on Angular.
The post’s author, Manfred Steyer, begins with the shell (host) which uses the router to lazy load a module. The microfrontend, called remote, also contains that module, which it loads into the shell. It is also possible to have a microfrontend without a shell, but there are some additional things you need to take care of there. Finally, you only need to connect the shell and the microfrontend.
Angular with Ivy - Build performance review
In the next post, Piotr Lewandowski gives an overview of the performance of Angular Ivy. He analyzes the bundle size of Angular 9, both in ES5 and ES2015, and with Ivy enabled and disabled.
One of Piotr’s first findings is that, despite expecting smaller bundle sizes across the table, the main.js bundle actually increases in size. This is due to Ivy’s ngcc tool, as well as the fact of fewer lazy-loaded chunks.
As for build speed, both development and production builds benefit from Ivy, with a decrease in build time of up to 30%. As Piotr points out, the true potential of Ivy will likely only be realized later on, when the migration period is over.
Publishing and importing a commons scss library to an Angular app
The next post we wanted to include is another part of a series on lazy loading components by Natalia Venditto. While the first four parts are framework-agnostic, this one is Angular-specific and deals with publishing and importing a commons scss library to an Angular application.
The first step described in this post is installing the npm package created in the previous posts as a dependency. Of course, you also need to make it accessible to your component via your app’s angular.json file. By including the node_modules path, you’re then able to import any stylesheet.
Make your Angular application accessible for everybody
We’re concluding this month’s recap with a post by Kevin Kreuzer on Angular in Depth detailing the setup of automated accessibility tests for an Angular application.
He begins with some background information and misconceptions about web accessibility, summing it up perfectly as: “Accessibility is not about including groups, it’s about not excluding groups.”
As Kevin states, the best way to ensure accessibility is to include it from the very beginning of a project. Angular has a great tool for automated accessibility tests - Pa11yCI. This tool provides a clear overview of the number of errors on each page and error details. Kevin finishes the post by showing how to integrate accessibility tests in a CD pipeline.
We hope you were able to find some interesting reads thanks to this recap, or perhaps even the perfect solution to that problem that’s been bugging you for days now. Don’t forget to recheck our blog - more interesting posts on Angular and digital experience are coming soon!
