What is new in Angular 12? How to upgrade Angular 12?
https://github.com/PranamBhat

What is new in Angular 12? How to upgrade Angular 12?

Angular v12 is released on 12-05-2021. It has come up with a lot of bug fixes, feature's, and performance improvements. Let's see what are the main feature's in Angular v12:


1)     Angular v12: “Ivy Everywhere” concept

 Angular v12 has finally deprecated the View Engine. The community has been working over recent releases towards the goal of converging the Angular ecosystem on Ivy. They call this approach “Ivy Everywhere”.

  •  As the View Engine is deprecated, so it will be removed in a future major release.
  • Current libraries are using View Engine and it will still work with Ivy apps (no work is required by developers), but library authors should start planning to transition to Ivy.

 2)     For forms, min and max validators are being introduced.

 This commit adds the missing min and max validators.

 BREAKING CHANGE:

Previously min and max attributes defined on the <input type="number">

were ignored by Forms module. Now presence of these attributes would

trigger min/max validation logic (in case formControl, formControlName

or ngModel directives are also present on a given input) and

corresponding form control status would reflect that.


Fix: https://github.com/angular/angular/issues/16352

3)     Remove unused methods from DomAdapter

The DomAdapter is present in all Angular apps and its methods aren't tree shakeable. These changes remove the methods that either aren't being used anymore or were only used by our own tests. Note that these changes aren't breaking, because the adapter is an internal API.

The following methods were removed:

getProperty - only used within our own tests.

log - Guaranteed to be defined on console.

logGroup and logGroupEnd - Only used in one place. It was placed in the DomAdapter for built-in null checking.

performanceNow - Only used in one place that has to be invoked through the browser console.

supportsCookies - Unused.

getCookie - Unused.

getLocation and getHistory - Only used in one place which appears to have access to the DOM already, because it had direct accesses to window. Furthermore, even if this was being used in a non-browser context already, the DominoAdapter was set up to throw an error.

The following APIs were changed to be more compact:

supportsDOMEvents - Changed to a readonly property.

remove - No longer returns the removed node.

4)     Exporting of a list of HTTP status codes.

In Angular v12, @angular/common/http now exports a list of http status codes.

Issue: https://github.com/angular/angular/issues/23543

New feature: https://www.npmjs.com/package/http-status-codes

5)     Passing Context to HTTP Interceptors

Passing metadata to HTTP interceptors. No more dirty hacks, such as using an HTTP header to pass custom data that our interceptor needs.

One common use case is to notify the interceptor that a request is cacheable. Let’s see how we use it.

First, update to the latest version of Angular. Next, create a new interceptor:

ng g interceptor cache


@Injectable()

           export class CacheInterceptor implements HttpInterceptor {

           intercept(request: HttpRequest, next: HttpHandler):
                    Observable<HttpEvent> {

                    return next.handle(request);

                   }

          }

Next, we need to create a unique token using HttpContextToken and provide a default value for it. A token is used to manipulate and access values stored in HttpContext.

HttpContext stores arbitrary user-defined values and ensures type safety without actually knowing the types.

The context is mutable and is shared between cloned requests unless explicitly specified.

const CACHE_IT = new HttpContextToken<boolean>(() => false);          

 

           export function cacheIt() {

            return new HttpContext().set(CACHE_IT, true);

           }           

 

           @Injectable()

           export class CacheInterceptor implements HttpInterceptor {         

 

            intercept(request: HttpRequest, next: HttpHandler):   

            Observable<HttpEvent> {

              

              if(request.context.get(CACHE_IT)) {

                 return ...

              }

                 

              return next.handle(request);

            }

           }

 

Finally, we can provide it in our HTTP request:

import { cacheIt } from './cache.interceptor';          

 

           @Injectable()

           export class UsersService {

            constructor(private http: HttpClient) {}

            

            getUsers() {

              return this.http.get('....', {

                context: cacheIt()

              })

            }

           }

 6)     Nullish Coalescing

The nullish coalescing operator (??) has been helping developers write cleaner code in TypeScript classes for a while now. We’re thrilled to announce that you can bring the power of nullish coalescing to Angular templates in v12!

Now, in templates, developers can use the new syntax to simplify complex conditionals.

For example: 

{{age !== null && age !== undefined ? age : calculateAge() }}

Becomes: 

{{ age ?? calculateAge() }}

 7)     Support for inline Sass in the styles field of the @Component decorator

 Both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. When updating to Angular 12, an app will automatically switch to the new API by updating via ng update.

 8)     Angular v12 supports TypeScript 4.2. Support for TypeScript 4.0 and TypeScript 4.1 has been dropped.

 9)     Support For IE11 Has Been Deprecated

 An update will start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

 10)     Upgrades the repository to use Node 14. Additionally, removes support for Node 10 as it has reached end of life. 

BREAKING CHANGE: Angular no longer maintains support for Node v10

 

Angular v12 includes a lot of Bug Fixes, New Features and Performance Improvements:

 https://github.com/angular/angular/releases

 

 Steps to upgrade Angular 2/4/5/6/7/8/9/10/11 to Angular 12:

  •  Make sure you are using Node v12 (>Node v10) and TypeScript 4.2.

 Execute these commands:

  1.  ng update @angular/cli
  2. ng update @angular/core
  3. ng update --all –force
  4. npm install --force @angular/cli@12 @angular/core@12
  5. npm audit fix –force
No alt text provided for this image
  • Make sure you have to set “aot” to “false” in angular.json file. By default, it will be “true”.

"aot": false,

  •  ng serve
No alt text provided for this image
No alt text provided for this image


No alt text provided for this image



Follow me on GitHub: https://github.com/PranamBhat

Connect me on LinkedIn: https://www.dhirubhai.net/in/pranam-bhat-11670689/

要查看或添加评论,请登录

Pranam Bhat的更多文章

  • Angular 14 is here!!

    Angular 14 is here!!

    Angular v14 is released today! Angular Team has completed 2 major requests for comments (RFC): Strictly Typed Reactive…

  • How to create and publish an npm package?

    How to create and publish an npm package?

    Introduction: In this article, we will see step by step guide to create and publish an npm package. Description: Let us…

    1 条评论
  • How to Deploy and Host an Angular application on Firebase?

    How to Deploy and Host an Angular application on Firebase?

    Introduction: In this article, we will see how we can deploy an Angular application on Firebase. It is very simple and…

    2 条评论
  • List of Algorithms in Computer Programming

    List of Algorithms in Computer Programming

    Introduction: In this article, we will see all the available algorithms in computer programming. This will be helpful…

    6 条评论
  • Angular 13 is now available!

    Angular 13 is now available!

    Introduction: Angular v13 is out and has come up with a lot of performance related updates. This will be a huge ad-on…

    2 条评论
  • How to make use of LinkedIn professionally and effectively?

    How to make use of LinkedIn professionally and effectively?

    Introduction: In a recent days, LinkedIn became top website for growing up professional network and getting jobs. It is…

  • Implementing Lazy Loading in Angular Project

    Implementing Lazy Loading in Angular Project

    Steps to implement Lazy Loading in Angular: 1) Create a new Angular project: ng new angular-lazy-loading 2) Create a…

  • Microsoft Introducing .NET 5

    Microsoft Introducing .NET 5

    .NET 5.

  • Django Framework Integration with Angular

    Django Framework Integration with Angular

    Django is an open-source framework for back-end web applications based on Python — one of the top web development…

    2 条评论

社区洞察

其他会员也浏览了