Angular

Angular v10 released!

Published Jun 29, 2020

Updated Jan 31, 2023

2 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Angular 10 Released

Since Angular v9 and Ivy were only released 4 month ago, it is very exciting to see Angular v10.0.0 released on June 25th. v10 doesn't have a ton of features, but still it offer several improvements!

What's new in the release

Angular Material New Date Range Picker

Angular material introduces a new date range picker component. For more information, please check the doc here.

Warnings about CommonJS imports

If you use a dependency which is packaged with CommonJS, it can result in a larger bundle size, since it will be harder for webpack to tree shake. Minko wrote a great article about why this is, here.

In Angular v10, if the dependency is CommonJS packaged, the CLI will give you a warning. I, for one, hope more and more libraries will use the ESM bundle instead.

Strict settings

Angular CLI introduces a --strict option when you create a new project.

ng new --strict

It will do the following things:

Enable strict mode in Typescript compile options
Enable strict template check of Angular. For details, check the doc here.
Reduce default bundle budgets by ~75%.
Config linting rules to prevent declarations of type 'any'.
Config your app as side effect free to enable advanced tree shaking. For more detail, check the doc here.

Update the version of the dependencies

Typescript has been updated to 3.9
TSLib has updated to 2.0
TSLint has updated to v6

Update the browser configuration

Also the default supported browsers have been updated to exclude some old browsers, and include the new version. And you can update the browsers support by updating the .browserslistrc file.

Deprecations

Angular Package Format no longer includes ESM5 or FESM5 bundles. It saves a lot of download and installation time. Those bundles are no longer needed, since now, the ES5 support is done at the end of the build by babel.

And also finally IE 9, 10, and Internet Explorer Mobile, are marked as deprecation, and will not be supported at v11.

The @angular/bazel package is also deprecated in v10. Instead, Angular Bazel support will continue in rules_NodeJS Angular. For more details, please check Alex Eagle's blog here.

Performance improvements

There are several performance improvements about ngcc and compiler-cli. So now, build will be faster than v9.

How to update to v10

Just use Angular CLI, and run

ng update @angular/cli @angular/core

For more details, please check the official blog here.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Jia Li
Jia Li is a frontend developer with passion, he is an Angular Collaborator and the code owner of angular/zone.js. He loves Angular and now develops Angular enterprise application.
@JiaLiPassion @JiaLiPassion

Angular Signals for Simpler State Management and DOM Performance

In this episode of the Modern Web Podcast, host Rob Ocel is joined by Adam Rackis, Danny Thompson, and guest Braydon Coyer, Senior Front-End Developer at LogicGate to talk about using Angular Signals for improved state management and DOM performance. Braydon explains how Signals simplify Angular development and offer better readability and efficiency compared to traditional methods like RxJS. The conversation also touches on hiring in the AI era, discussing challenges around take-home tests and live coding, and how AI tools like ChatGPT are changing the interview process. Chapters - 00:00 - Introduction - 00:57 - The Angular Renaissance - 02:24 - Signals in Angular - 03:27 - Transitioning to Signals - 04:19 - Signals in Utility Development - 05:09 - RxJS and Signals - 07:52 - Signals vs Other State Management Solutions - 09:34 - Testing Signals - 10:29 - Control Flow and Standalone Components in Angular - 12:02 - Angular's Evolution and Accessibility - 13:28 - Angular’s Framework Governance - 17:10 - Hiring in the Age of AI - 19:15 - Pair Programming and Real-Time Problem Solving - 22:24 - The Role of AI in Interviews - 27:58 - Wrapping Up Follow Braydon Coyer Twitter: https://x.com/BraydonCoyer Linkedin: https://www.linkedin.com/in/braydon-coyer/ Github: https://github.com/braydoncoyer...

Oct 30, 2024

1 min

Angular

How to Develop a Vision Pro App using Angular with Nathan Walker

In this training led by Nathan Walker, viewers are introduced to Angular app development for VisionPro. The session covers integrating 3D models, manipulating them with NeoScript Swift, and using USDZ files, with a focus on asset management and Swift packages for immersive experiences. Nathan also reviews integrating and manipulating 3D models using NeoScript Swift, enhancing Angular apps with interactive and visually appealing interfaces. The use of USDZ files added stunning 3D graphics, bringing apps to life. The training also explores the interaction between NativeScript views and Swift UI components, demonstrating the flexibility in app development. This integration allows developers to create dynamic user interfaces, combining the strengths of Angular and Swift UI for exceptional user experiences....

Jun 11, 2024

1 min

AngularJavaScript

Zone.js deep diving - Execution Context

Zone.js deep diving Chapter 1: Execution Context As an Angular developer, you may know NgZone, which is a service for executing work inside, or outside of the angular Zone. You may also know that this NgZone service is based on a library called zone.js, but most developers may not directly use the APIs of zone.js, or know what zone.js is, so I would like to use several articles to explain zone.js to you. My name is Jia Li. I am a senior software engineer at This Dot Labs, and I have contributed to zone.js for more than 3 years. Now, I am the code owner of angular/zone.js package (zone.js had been merged into angular monorepo), and I am also an Angular collaborator. What is Zone.js Zone.js is a library created by Brian Ford in 2010 and is inspired by Dart. It provides a concept called Zone, which is an execution context that persists across async tasks. A Zone can: 1. Provide execution context that persist across async tasks. 2. Intercept async task, and provide life cycle hooks. 3. Provide centralized error handler for async tasks. We will discuss those topics one by one. Execution Context So what is Execution Context? This is a fundamental term in Javascript. Execution Context is an abstract concept that holds information about the environment within the current code being executed. The previous sentence may be a little difficult to understand without context, so let's use some code samples to explain it. For better understanding of Execution Context/Scope, please refer to this great book from getify 1. Global Context ` So in this first example, we have a global execution context, which will be created before any code is created. It needs to know it's scope, which means the execution context needs to know which variables and functions it can access. In this example, the global execution context can access variable a. Then, after the scope is determined, the Javascript engine will also determine the value of this. If we run this code in Browser, the globalThis will be window, and it will be global in NodeJS. Then, we execute testFunc. When we are going to run a new function, a new execution context will be created, and again, it will try to decide the scope and the value of this. In this example, the this in the function testFunc will be the same with globalThis, because we are running the testFunc without assigning any context object by using apply/call. And the scope in testFunc will be able to access both a and b. This is very simple. Let's just see another example to recall the Javascript 101. ` Here, testFunc is a property of testObj. We call testFunc in several ways. We will not go very deeper about how it works. We just list the results here. Again, please check getify for more details. 1. call testObj.testFunc, this will be testObj. 2. create a reference newTestFunc, this will be globalThis. 3. call with apply, this will be newObj. 4. call bounded version, this will always be bindObj. So we can see that this will change depending on how we call this function. This is a very fundamental mechanism in Javascript. So, back to Execution Context in Zone. What is the difference? Let's see the code sample here: ` So, in this example, we created a zone (we will talk about how to create a zone in the next chapter). As suggested by the term zone, when we run a function inside the zone, suddenly we have a new execution context provided by zone. Let's call it zoneThis for now. Unlike this, the value of zoneThis will always equal the zone, where the functions is being executed in no matter if it is a sync or an async operation. You can also see, in the callback of setTimeout, that the zoneThis will be the same value when setTimeout is scheduled. So this is another principle of Zone. The zone execution context will be kept as the same value as it is scheduled. So you may also wonder how to get zoneThis. Of course, we are not inventing a new Javascript keyword zoneThis, so to get this zone context, we need to use a static method, introduced by Zone.js, which is Zone.current. ` Because there is a Zone execution context we can share inside a zone, we can also share some data. ` Execution Context is the fundamental feature of Zone.js. Based on this feature, we can monitor/track/intercept the lifecycle of async operations. We will talk about those hooks in the next chapter....

Jan 28, 2020

4 mins

Angular

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Angular v10 released!

Angular 10 Released

What's new in the release

Angular Material New Date Range Picker

Warnings about CommonJS imports

Strict settings

Update the version of the dependencies

Update the browser configuration

Deprecations

Performance improvements

How to update to v10

Jia Li

You might also like

Angular Signals for Simpler State Management and DOM Performance

How to Develop a Vision Pro App using Angular with Nathan Walker

Zone.js deep diving - Execution Context

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

You might also like

Angular Signals for Simpler State Management and DOM Performance

How to Develop a Vision Pro App using Angular with Nathan Walker

Zone.js deep diving - Execution Context

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau