The highly anticipated Angular update has arrived with the release of Angular 8. Built entirely in TypeScript and maintained by the Angular team at Google and a host of community members and organizations, Angular has over 42,000 stars on GitHub. In this article, we will review the new features in version 8, along with changes and updates available for use now.
Spoiler alert: The eagerly awaited Ivy renderer that did not ship with v7 will allegedly ship with version 8 soon.
This new release appears to have touched almost everything that makes up the Angular platform, including Angular core, Angular Material, Angular CLI, documentation, and — lest we forget — partner launches. It improves application startup time on modern browsers, provides new APIs for tapping into the CLI, and aligns Angular to the wider ecosystem and more web standards.
Differential loading by default
This is a great feature: it lets your app’s users get exactly the JavaScript bundle that fits their particular device or browser. Differential loading is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities.
Starting from this new version, Angular by default now performs two builds: a modern ES2015 build and a legacy ES5 build. When you update a project to version 8, your tsconfig.json file gets updated to bring this into action.
Here, when the target is ES2015, two bundles get generated, and at runtime, the user’s browser will use attributes on the script tag to deliver the right bundle.
// Modern JS <script type="module" src="…"> // Legacy JS <script nomodule src="…">
Early tests from community members suggest that up to 20 percent of bundle size can be saved depending on the end user’s device and browser, as well as the number of JS features they take advantage of.
Above is the test for Angular’s official homepage. You can learn more about differential loading here.
Router configurations use dynamic imports
Exciting changes also cut through the default router configuration. Initially, this is the router syntax in Angular:
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
Now, in version 8, the syntax officially looks like this:
{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}
This is because lazy loading through routes is now possible straight from that syntax. Angular now recommends that developers lazily load parts of their application using the router. This is accomplished, as you have seen, by using the loadChildren key in your route configuration.
Support for IntelliSense is also already set up in VS Code and WebStorm to help with the imports. This feature comes right out of the box after updating.
Builder APIs in the CLI
Remember Angular Schematics, which provides a platform for extending or modifying CLI dev commands like ng new, ng generate, ng add, and ng update? New Builder APIs now allow for build commands like ng build, ng test, and ng run to enable the same capabilities for production-centric commands — really exciting times. Here is the official blog post on these new APIs.
Angular is already working with cloud providers to start consuming these APIs. You can try the latest version of AngularFire — it adds a deploy command, thereby making build-and-deploy to Firebase easier than ever:
ng add @angular/fire ng run my-app:deploy
Once installed, this deployment command will both build and deploy your application in the way recommended by AngularFire.
Workspace APIs in the CLI
More on Schematics: developers previously had to manually modify their angular.json files to make changes to the workspace config. But things have changed in version 8. Now, there is a new API that is going to handle reading and modifying the angular.json files. You can read more about the available Workspace APIs here.
Web worker support
Web workers are great for speeding things up in your application when you start working on CPU-intensive tasks. They let you offload work to a background thread, which can be an image or video manipulation, for example.
The Angular team uses web workers on angular.io for in-app search indexing. With this new version 8, you can generate new web workers from your Angular CLI. To add a worker to your project, you can run:
ng generate webWorker my-worker
Once you have a web worker, you can use it normally in your application, and the CLI will be able to bundle and code-split it correctly:
const worker = new Worker(`./my-worker.worker`, { type: `module` });
You can read more about web workers in the Angular CLI here.
New deprecation guide
The Angular team is very committed to maintaining Semantic Versioning and a high degree of stability, even across major versions. For Angular’s public API, Angular is committed to supporting features for N+2 releases.
This means a feature that is deprecated in v8.1 will keep working in the following two major releases (v9 and v10). For example, platform-webworker is deprecated in version 8. It is very easy to find deprecations and removals in Angular; for a comprehensive list of all deprecations, see the new Deprecation Guide.
Ivy and Bazel?
Well, you will have to wait a little bit more for Ivy, the new rendering engine, and Bazel, the new build system, to be ready for official use with Angular — in a few days’ time, according to the official release note.
These upcoming updates will be optional for anyone that wants to play around using them. At the time of writing, the official status page for Ivy says it is over 93 percent ready to ship at any time.
Updating to version 8
Updating your Angular application to the latest version is now just one command away, thanks to the team at Angular and the efficiency of the last version. Just run the command below:
ng update @angular/cli @angular/core
This update has also been reported to be very fast, so when you update, let us know in the comments how long it took (shouldn’t be more than five minutes). For more detailed update information, you can visit this link to get an easy-to-use, all-inclusive Angular update application.
Here is a link to the Angular CHANGELOG.
Conclusion
More than 280 contributors made this new version release possible, which brings increased speed and the latest web technologies into the fold. Yes, the Ivy renderer release is coming in a few days’ time, and I cannot wait to use it. Happy hacking!
What is your favorite feature of Angular 8? Share below in the comments.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Web workers does not work, Module not found: Error: Can’t resolve ‘./my-worker.worker’