What’s New in Angular 10

The new features and breaking changes the Google-developed web framework brought to us

Rakia Ben Sassi
Jun 23 · 14 min read
A group of Developers — Photo by Alex Kotliarskyi on Unsplash
A group of Developers — Photo by Alex Kotliarskyi on Unsplash
Photo by Alex Kotliarskyi on Unsplash

Lingo

Microsyntax

Binding expression

Abstract syntax tree (AST)

terser

‘UrlMatcher’

type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult;
content_copyexport function htmlFiles(url: UrlSegment[]) {
return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
}
export const routes = [{ matcher: htmlFiles, component: AnyComponent }];

Bazel

Angular Language Service

npm install --save-dev @angular/language-service

Compiler Philosophy

TypeScript transpiler architecture

TypeScript transpiler architecture
TypeScript transpiler architecture
TypeScript architecture

Angular compilation steps

Angular Compiler Architecture (source)
Angular Compiler Architecture (source)
Angular compiler architecture

The two new compiler entry points

A way to use ngcc in postinstall
A way to use ngcc in postinstall
A way to use ‘ngcc’ in ‘postinstall
ng new shiny-ivy-app --enable-ivy
"angularCompilerOptions": {
"enableIvy": true
}
node_modules/.bin/ngc

Key Features of Angular 10

Features

Angular Material New Date Range Picker
Angular Material New Date Range Picker
Angular Material New Date Range Picker

Breaking changes

error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

Bug fixes


The Compiler-Compatibility Problem

Converting pre-Ivy code

Upgrade to Angular 10

ng update @angular/cli @angular/core

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Rakia Ben Sassi

Written by

Senior Software Engineer & TechLead | Synesthesia | passionate about psychology & creativity and write about technical and human oriented issues - webenius.com

Better Programming

Advice for programmers.

Rakia Ben Sassi

Written by

Senior Software Engineer & TechLead | Synesthesia | passionate about psychology & creativity and write about technical and human oriented issues - webenius.com

Better Programming

Advice for programmers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store