Angular 11 is here, and it’s a big release. You can read the full changelog here, but I’ve rounded up some of the most interesting things we’re seeing so far.
Dynamic imports for lazy-loaded modules are no longer a part of Angular’s core.
In Angular, the dynamic import feature was a way to load modules as you needed them. This meant that when your app’s codebase grew larger and larger, it could dynamically load new modules as they were required by your application.
The dynamic import feature has been deprecated in the v11 release and removed in v12 due to concerns about its performance impact on large applications.
The @angular/router package has been updated to v11.0.0-next.2 and the application can be used with Angular 11 directly.
The @angular/router package has been updated to v11.0.0-next.2 and the application can be used with Angular 11 directly.
This release of the router package comes with an API which helps you create your own RouterConfig in order to configure routes and their paths, as well as add additional custom property definitions for each route path (e.g., a path parameter).
The @angular/elements package is updated to support custom element v1 specs.
In addition to the new @angular/elements package, it’s also worth noting that the new @angular/elements-custom elements v1 are supported in a similar manner.
Custom element v1 is a W3C specification that defines a standard way to create new HTML tags. It’s part of the web components standard and allows you to use custom elements alongside existing HTML elements like , or . This makes it easier for developers who want to build their own custom components without having to maintain two versions at once—one for older browsers (IE 8+) and another for newer ones (IE 11+).
Angular 11 adds the possibility to provide a configuration in the compiler options that can be used to set a strategy for when to emit IVY instructions and how they can be referenced.
Angular 11 adds the possibility to provide a configuration in the compiler options that can be used to set a strategy for when to emit IVY instructions and how they can be referenced. The default behavior is still very similar to angular 10, but there are some changes:
- In addition to using ivy-offload-mode=”wrap” on all directives, it’s now possible to use ivy-offload-mode=”inline” on directives with ngInjector services or services injectable by NgModule. This allows you accesses in those cases where you want them without having code duplication between your component tree and its children (which would otherwise mean that every time you wanted access a service injected somewhere else than your component tree).
- Before angular 11 had no way of controlling which classes were wrapped into an @IvyClass annotation (i.e., only prefixed classes). Now we have another option called “skip” which controls whether we should add annotations at all (defaults true) or not at all (defaults false).
This feature allows you to use incremental compilation so that only files that have changed are compiled in your next build, therefore making your CI builds faster.
This feature allows you to use incremental compilation so that only files that have changed are compiled in your next build, therefore making your CI builds faster.
In addition to this feature, Angular Ivy has a couple of other improvements:
- It no longer requires an explicit dependency on PostCSS or Webpack. Instead, it relies on the imported core library (i.e., @angular/core) which is already included by default in every new project created with the CLI or Ivy. This makes it easier to get started with building apps without having to worry about installing third party packages before starting development!
A lot is going on in Angular 11 (Angular Ivy, compiler improvements, etc).
Angular Ivy is a new tool that allows you to convert your Angular 7 code into a new version of the framework. This means that you can use any of the features and APIs in Ivy, but you won’t have access to everything else (like NgModule).
The compiler itself also has some improvements:
- The language service now supports TypeScript 4.1 and later, so it can be used with older versions of TypeScript as well as newer ones. This makes it possible for developers who aren’t familiar with the latest versions of JavaScript or Flow (the static type checker) to use their preferred tools without having to worry about compatibility issues between languages or compilers.
Conclusion
I hope this article has helped you understand what’s new in Angular 11, and how it can benefit your own projects. As always, if you have any questions or comments please feel free to reach out!
