Angular v14's New Features

As per Angular- “We are excited to announce the release of Angular v14! From typed forms and standalone components to new primitives in the Angular CDK (component dev kit). this release includes many features and bug fixes directly contributed by community members, from adding router strong typing to more tree-shakable error messages.”

Changes/enhancements in Angular CLI

There are many commands to generate artifacts such as modules, components, and directives for your angular project and typos are one of the most common reasons a command-line prompt throws an error.

To overcome this problem — Angular 14 provides a new feature in the CLI that enables real-time type ahead auto-completion in the terminal. It is called ng completion

As per Angular — “To ensure all Angular developers know about this, the CLI will prompt you to opt-in to autocomplete during your first command execution in v14. You can also manually run ng completion and the CLI will automatically set this up for you.”

Built-in improvements

Angular v14 supports the latest TypeScript 4.7 and targets ES2020 by default, which allows the CLI to ship smaller code

Bind to protected members

@Component({ 
 selector: 'my-component', 
 template: '{{ message }}', // message is private member but will compile with v14
})
export class MyComponent { 
 protected message: string = 'Hello world';
}

Streamlined page title-

No additional import for defining page title

const routes: Routes = [{ 
 path: 'home', 
 component: HomeComponent,
// define your page title
 title: 'My App - Home Page'
}];

Simplifying Standalone Components

Angular issued an RFC (Request for Comments) on standalone components which is an attempt to make NgModules optional. In Angular v14, standalone components are in the developer preview.

Very Important Note-

As per Angular ”Standalone Components are ready to be used in your applications for exploration and development, but are not a stable API and will potentially change outside our typical model of backward compatibility.”

— Use directives and pipes directly inside components without defining them inside @NgModule()

— Add standalone true inside your component
standalone: true

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';

export class ExampleStandaloneComponent { 

}
@Component({ 
 selector: 'app-root',
  standalone: true,
  imports: [    ImageComponent, HighlightDirective, CommonModule]
 template: `<div> <app-image-component></app-image-component> <h2 app-highlight>Hello</h2></div>  `})
 // Bootstrap a new Angular application using our 
// ExampleStandaloneComponent` as a root 
component.bootstrapApplication(ExampleStandaloneComponent);

Short Cut to create(will be available in coming months)—
ng g c <name> — standalone

Typed Angular Forms(strict typing for the Angular Reactive Forms package)

To ensure that the values inside of form controls, groups, and arrays are type-safe.

const cat = new FormGroup({
  lives: new FormControl(9)
});
// TS Error: Property 'substring' does not exist on type 'number'. 
const remainingLives = cat.value.lives.substring(1);

Note- As per Angular — “Update schematics allows for incremental migration to typed forms, so you can gradually add typing to your existing forms with full backward compatibility.

ng update will replace all form classes with untyped versions”

// v13 untyped form
const cat = new FormGroup({ 
lives: new FormControl(9)
});
// v14 untyped form
const cat = new UntypedFormGroup({ 
 lives: new UntypedFormControl(9)
});
const email = new FormControl('[email protected]');
This control will be automatically inferred to have the type FormControl<string|null>
why does the type of this control include null?
because the control can become null at any time, by calling reset
If you want to make this control non-nullable, you may use the nonNullable option.
const email = new FormControl('[email protected]', {nonNullable: true});

Specifying an Explicit Type

const email = new FormControl<string|null>(null);

Extended developer diagnostics

More insight into your templates to improve them.

The Angular compiler includes “extended diagnostics” which identify many patterns, in order to warn developers about the potential issues and enforce common best practices. Extended diagnostics are warnings by default and do not block compilation. Each diagnostic can be configured as either:

• warning (default) - The compiler emits the diagnostic as a warning but does not block compilation. The compiler will still exit with status code 0, even if warnings are emitted.

• error - The compiler emits the diagnostic as an error and fails the compilation. The compiler will exit with a non-zero status code if one or more errors are emitted.

• suppress - The compiler does not emit the diagnostic at all.

tsconfig.json file
{  
 "angularCompilerOptions":
 {   
  "extendedDiagnostics": {   
   "checks": {      

"invalidBananaInBox": "suppress"   
    },       

    "defaultCategory": "error"     } 
  }
 }

Tree-shakeable error messages

This allows the build optimizer to tree-shake error messages (long strings) from production bundles while retaining error codes.

// Before v14 the error is a string:> 
Directives cannot inherit Components. 
Directive MyDirective is attempting to extend component MyComponent.
// Since v14 the error code makes this tree-shakeable:> 
NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.
// v14 production bundles 
preserve the error code, tree-shaking strings and making the bundle XX size smaller:
> NG0903 //error code

Happy Learning…👏👏👏👏