{"id":7300,"date":"2021-06-02T05:29:03","date_gmt":"2021-06-02T03:29:03","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/angular-12-features-deprecations-migration\/"},"modified":"2023-12-18T13:07:43","modified_gmt":"2023-12-18T12:07:43","slug":"angular-12-features-deprecations-migration","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/","title":{"rendered":"Angular 12: Features, Deprecations & Migration"},"content":{"rendered":"\n

In this post, We are going to discuss<\/a>, the new features in the latest release Angular 12, deprecated APIs and migration form 11<\/p>\n\n\n\n

You may also be interested in: “Realtime with serverless using Websocket in AWS”<\/a><\/p>\n\n\n\n

Features:<\/h2>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Nullish Coalescing<\/strong>:<\/h3>\n\n\n\n

<\/p>\n\n\n\n

Nullish Coalescing<\/strong> first was introduced in Typescript & developers <\/a>were able to write the code with more cleaner approach. <\/p>\n\n\n\n

And hence, now Angular view template also supports Nullish Coalescing from Angular 12.<\/p>\n\n\n\n

You can think of this feature as a way to \u201cfall back\u201d to a default value when dealing with null<\/code> or undefined<\/code>. When we write code like.<\/p>\n\n\n\n

For Example:<\/p>\n\n\n\n

{{ foo ?? bar() }}<\/code><\/pre>\n\n\n\n
This is a new way to say that the value foo<\/code> will be used when it is \u201cpresent\u201d; but when it is null<\/code> or undefined<\/code>, calculate bar()<\/code> in its place.<\/p>\n\n\n\n
Again, the above code is equivalent to the following.<\/p>\n\n\n\n
{{ foo !== null && foo !== undefined ? foo : bar() }}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Forms: introduce min and max validators<\/h3>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
If I have an <input type=\"number\" min=\"0\" [(ngModel)]=\"val\" #num=\"NgModel\"><\/em><\/code>, I should be able to assume that num.valid<\/code> will be false<\/code> when the input’s value is -10<\/code>. <\/p>\n\n\n\n
That’s just a really basic and logical assumption that developers will<\/em> make, and to do otherwise, out of the box<\/em>, without requiring an extra “workaround” directive, etc, is a disservice to them.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Fix:<\/strong> Previously min<\/em><\/code> and max<\/em><\/code> attributes defined on the <input type=\"number\"><\/em><\/code> were ignored by Forms module. Now presence of these attributes would trigger min\/max validation logic (in case formControl<\/code>, formControlName<\/code> or ngModel<\/em><\/code> directives are also present on a given input) and corresponding form control status would reflect that.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Added historyGo method to Location service:<\/h3>\n\n\n\n
historyGo<\/em><\/code>, that will let the user navigate to a specific page from session history identified by its
relative position to the current page.<\/p>\n\n\n\n
Documentation: https:\/\/angular.io\/api\/common\/Location#historyGo<\/p>\n\n\n\n
Example: <\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
location.historyGo(2)<\/em><\/code> moves forward two pages and location.historyGo(-2)<\/em><\/code> moves back two pages. When we try to go beyond what’s stored in the history session, we stay in the current page. Same behaviour occurs when relativePosition<\/code> equals 0<\/p>\n\n\n\n
location.historyGo(2)<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Support APP_INITIALIZER work with observable<\/h3>\n\n\n\n
<\/p>\n\n\n\n
In Angular v12 you will be able to directly return an Observable. Let\u2019s see how:<\/p>\n\n\n\n
import<\/strong> { APP_INITIALIZER, FactoryProvider } from<\/strong> '@angular\/core';\nimport<\/strong> { ConfigService } from<\/strong> \".\/config.service\";\n\nfunction<\/strong> loadConfigFactory(configService: ConfigService) {\n  \/\/ Easy as pie  <\/em>\n  return<\/strong> () =><\/strong> configService.getConfig(); \/\/  <\/em>\n\n  \/\/ How you might've done it \u201cbefore\u201d<\/em>\n  \/\/ return () => configService.getConfig().toPromise();<\/em>\n}\n\nexport<\/strong> const<\/strong> loadConfigProvider: FactoryProvider =<\/strong> {\n  provide: APP_INITIALIZER,\n  useFactory: loadConfigFactory,\n  deps: [ConfigService],\n  multi: true<\/strong>\n};\n<\/code><\/pre>\n\n\n\n
An important thing to note is that the Observable must complete<\/strong>, otherwise the bootstrap process will not continue.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Support http client request metadata for use in interceptors:<\/h3>\n\n\n\n
<\/p>\n\n\n\n
Previously,  when using an http interceptor you cannot pass meta data about the request to the interceptor<\/p>\n\n\n\n
Now, Http context stores arbitrary user defined values and ensures type safety without actually knowing the types. It is backed by a Map<\/code> and guarantees that keys do not clash.<\/p>\n\n\n\n
Documentation<\/strong>: https:\/\/angular.io\/api\/common\/http\/HttpContext<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
@Injectable()\nexport class UsersService {\n  constructor(private http: HttpClient) {}\n  \n  getUsers() {\n    return this.http.get('....', {\n      context: return new HttpContext().set('cacheRequest', true); \/\/ We have added context here\n    })\n  }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Disabling animations through BrowserAnimationsModule.withConfig<\/h3>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Previously, the only way to disable animations was by providing the NoopAnimationsModule<\/code> which didn’t allow for it to be disabled based on runtime information.<\/p>\n\n\n\n
These changes add support for disabling animations based on runtime information by using BrowserAnimationsModule.withConfig({disableAnimations: true})<\/code>.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Documentation<\/strong>: https:\/\/angular.io\/api\/platform-browser\/animations\/BrowserAnimationsModuleConfig<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Deprecated APIs:<\/h2>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Support for IE11:<\/h3>\n\n\n\n
<\/p>\n\n\n\n
Angular support for Microsoft’s Internet Explorer 11 (IE11) is deprecated and will be removed in Angular v13.<\/p>\n\n\n\n
Documentation<\/strong>: https:\/\/angular.io\/guide\/deprecations#internet-explorer-11<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Node Version 10 or older:<\/h3>\n\n\n\n
<\/p>\n\n\n\n
You can no longer use Angular with Node.js version 10 or older.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Migration to Angular 12<\/h2>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
First check your application’s version of Angular: From within your project directory, use the ng version<\/em><\/code> command. So that you can select the version in the interactive update guide given by Angular.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Angular provides complete instructions in the interactive Angular Update Guide<\/a>, So that you can select the options based on your app and it will give you the steps and guide for updating.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
\"<\/figure>\n\n\n\n
Unimedia Technology<\/h2>\n\n\n\n
Here at Unimedia Technology<\/a> we have a team of Cloud Native Developers<\/strong> that can help you develop your most complex AWS and Azure Applications.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, We are going to discuss, the new features in the latest release Angular 12, deprecated APIs and migration form 11 You may also be interested in: “Realtime with serverless using Websocket in AWS” Features: Nullish Coalescing: Nullish Coalescing first was introduced in Typescript & developers were able to write the code with […]<\/p>\n","protected":false},"author":6,"featured_media":6635,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,219],"tags":[],"class_list":["post-7300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-de","category-technical-guides-de"],"acf":[],"yoast_head":"\nAngular 12: Features, Deprecations & Migration - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 12: Features, Deprecations & Migration\" \/>\n<meta property=\"og:description\" content=\"In this post, We are going to discuss, the new features in the latest release Angular 12, deprecated APIs and migration form 11 You may also be interested in: “Realtime with serverless using Websocket in AWS” Features: Nullish Coalescing: Nullish Coalescing first was introduced in Typescript & developers were able to write the code with […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-02T03:29:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T12:07:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular 12: Features, Deprecations & Migration - Unimedia Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/","og_locale":"de_DE","og_type":"article","og_title":"Angular 12: Features, Deprecations & Migration","og_description":"In this post, We are going to discuss, the new features in the latest release Angular 12, deprecated APIs and migration form 11 You may also be interested in: “Realtime with serverless using Websocket in AWS” Features: Nullish Coalescing: Nullish Coalescing first was introduced in Typescript & developers were able to write the code with […]","og_url":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2021-06-02T03:29:03+00:00","article_modified_time":"2023-12-18T12:07:43+00:00","og_image":[{"width":1120,"height":660,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Angular 12: Features, Deprecations & Migration","datePublished":"2021-06-02T03:29:03+00:00","dateModified":"2023-12-18T12:07:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/"},"wordCount":613,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png","articleSection":["Angular","Technical Guides"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/","url":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/","name":"Angular 12: Features, Deprecations & Migration - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png","datePublished":"2021-06-02T03:29:03+00:00","dateModified":"2023-12-18T12:07:43+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Copy-of-websocket-serverless-ts-4.png","width":1120,"height":660,"caption":"angular 12 release update"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/de\/angular-12-features-deprecations-migration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Angular 12: Features, Deprecations & Migration"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7300"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6635"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}