{"id":7166,"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":"2024-01-10T18:09:08","modified_gmt":"2024-01-10T17:09:08","slug":"angular-12-features-deprecations-migration","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/","title":{"rendered":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3"},"content":{"rendered":"\n

En aquesta publicaci\u00f3, parlarem<\/a> de les noves funcions de l’\u00faltima versi\u00f3 Angular 12, les API obsoletes i el formulari de migraci\u00f3 11<\/p>\n\n

Tamb\u00e9 us pot interessar: “En temps real amb sense servidor utilitzant Websocket a AWS”<\/a><\/p>\n\n

Caracter\u00edstiques:<\/h2>\n\n

<\/p>\n\n

<\/p>\n\n

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

<\/p>\n\n

Nullish Coalescing<\/strong> es va introduir primer a Typescript i els desenvolupadors<\/a> van poder escriure el codi amb un enfocament m\u00e9s net. <\/p>\n\n

I, per tant, ara la plantilla de vista angular tamb\u00e9 admet Coalescing nul d’Angular 12.<\/p>\n\n

Podeu pensar en aquesta funci\u00f3 com una manera de “retornar” a un valor predeterminat quan es tractanull<\/code> oundefined<\/code> . Quan escrivim codi com.<\/p>\n\n

Per exemple:<\/p>\n\n

{{ foo ?? bar() }}<\/code><\/pre>\n\n
Aquesta \u00e9s una nova manera de dir que el valorfoo<\/code> s’utilitzar\u00e0 quan sigui “present”; per\u00f2 quan ho \u00e9snull<\/code> oundefined<\/code> , calcularbar()<\/code> al seu lloc.<\/p>\n\n
De nou, el codi anterior \u00e9s equivalent al seg\u00fcent.<\/p>\n\n
{{ foo !== null && foo !== undefined ? foo : bar() }}<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
Formularis: introduir validadors min i max<\/h3>\n\n
<\/p>\n\n
<\/p>\n\n
Si tinc un<input type=\"number\" min=\"0\" [(ngModel)]=\"val\" #num=\"NgModel\"><\/em><\/code> , ho hauria de poder suposarnum.valid<\/code> ser\u00e0false<\/code> quan el valor de l’entrada \u00e9s-10<\/code> .  <\/p>\n\n
Aix\u00f2 \u00e9s nom\u00e9s una suposici\u00f3 b\u00e0sica i l\u00f2gica que faran<\/em> els desenvolupadors, i fer-ho d’una altra manera, fora de la caixa<\/em> , sense requerir una directiva addicional de “soluci\u00f3 alternativa”, etc., els \u00e9s un mal servei.<\/p>\n\n
<\/p>\n\n
Correcci\u00f3:<\/strong> anteriormentmin<\/em><\/code> imax<\/em><\/code> atributs definits al<input type=\"number\"><\/em><\/code> van ser ignorats pel m\u00f2dul Formularis. Ara la pres\u00e8ncia d’aquests atributs activaria la l\u00f2gica de validaci\u00f3 min\/max (en cas queformControl<\/code> ,formControlName<\/code> ongModel<\/em><\/code> les directives tamb\u00e9 estan presents en una entrada determinada) i l’estat de control de formulari corresponent ho reflectiria.<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
S’ha afegit el m\u00e8tode historyGo al servei d’ubicaci\u00f3:<\/h3>\n\n
historyGo<\/em><\/code>, que permetr\u00e0 a l’usuari navegar a una p\u00e0gina espec\u00edfica de l’historial de sessions identificada pel seuposici\u00f3 relativa a la p\u00e0gina actual.<\/p>\n\n
Documentaci\u00f3: https:\/\/angular.io\/api\/common\/Location#historyGo<\/p>\n\n
Exemple:  <\/strong><\/p>\n\n
<\/p>\n\n
location.historyGo(2)<\/em><\/code>  avan\u00e7a dues p\u00e0gines ilocation.historyGo(-2)<\/em><\/code> retrocedeix dues p\u00e0gines. Quan intentem anar m\u00e9s enll\u00e0 del que s’emmagatzema a la sessi\u00f3 d’historial, ens quedem a la p\u00e0gina actual. El mateix comportament es produeix quanrelativePosition<\/code> \u00e9s igual a 0<\/p>\n\n
location.historyGo(2)<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
Admet el treball d’APP_INITIALIZER amb observable<\/h3>\n\n
<\/p>\n\n
A Angular v12 podreu retornar directament un Observable. Vegem com:<\/p>\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
Una cosa important a tenir en compte \u00e9s que l’Observable s’ha de completar<\/strong> , en cas contrari, el proc\u00e9s d’arrencada no continuar\u00e0.<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
Admet metadades de sol\u00b7licitud de client http per utilitzar-les en interceptors:<\/h3>\n\n
<\/p>\n\n
Anteriorment, quan utilitzeu un interceptor http no podeu passar metadades sobre la sol\u00b7licitud a l’interceptor<\/p>\n\n
Ara, el context Http emmagatzema valors arbitraris definits per l’usuari i garanteix la seguretat del tipus sense con\u00e8ixer realment els tipus. Est\u00e0 recolzat per aMap<\/code> i garanteix que les claus no xoquen.<\/p>\n\n
Documentaci\u00f3<\/strong> : https:\/\/angular.io\/api\/common\/http\/HttpContext<\/a><\/p>\n\n
<\/p>\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
<\/p>\n\n
<\/p>\n\n
Desactivaci\u00f3 d’animacions mitjan\u00e7ant BrowserAnimationsModule.withConfig<\/h3>\n\n
<\/p>\n\n
<\/p>\n\n
Anteriorment, l’\u00fanica manera de desactivar les animacions era proporcionant elNoopAnimationsModule<\/code> que no permetia desactivar-lo segons la informaci\u00f3 del temps d’execuci\u00f3.<\/p>\n\n
Aquests canvis afegeixen suport per desactivar animacions basades en la informaci\u00f3 del temps d’execuci\u00f3 mitjan\u00e7ant l’\u00fasBrowserAnimationsModule.withConfig({disableAnimations: true})<\/code> .<\/p>\n\n
<\/p>\n\n
Documentaci\u00f3<\/strong> : https:\/\/angular.io\/api\/platform-browser\/animations\/BrowserAnimationsModuleConfig<\/a><\/p>\n\n
<\/p>\n\n
<\/p>\n\n
API obsoletes:<\/h2>\n\n
<\/p>\n\n
<\/p>\n\n
Suport per a IE11:<\/h3>\n\n
<\/p>\n\n
El suport d’Angular per a Internet Explorer 11 (IE11) de Microsoft est\u00e0 obsolet i s’eliminar\u00e0 a Angular v13.<\/p>\n\n
Documentaci\u00f3<\/strong> : https:\/\/angular.io\/guide\/deprecations#internet-explorer-11<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
Node versi\u00f3 10 o anterior:<\/h3>\n\n
<\/p>\n\n
Ja no podeu utilitzar Angular amb Node.js versi\u00f3 10 o anterior.<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
Migraci\u00f3 a Angular 12<\/h2>\n\n
<\/p>\n\n
<\/p>\n\n
Primer comproveu la versi\u00f3 d’Angular de la vostra aplicaci\u00f3: des del directori del vostre projecte, utilitzeung version<\/em><\/code> comandament. Perqu\u00e8 pugueu seleccionar la versi\u00f3 a la guia d’actualitzaci\u00f3 interactiva proporcionada per Angular.<\/p>\n\n
<\/p>\n\n
Angular proporciona instruccions completes a la Guia d’actualitzaci\u00f3 d’Angular<\/a> interactiva, perqu\u00e8 pugueu seleccionar les opcions basades en la vostra aplicaci\u00f3 i us donar\u00e0 els passos i la guia per a l’actualitzaci\u00f3.<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\"<\/figure>\n\n
Unimedia Technology<\/h2>\n\n
A Unimedia Technology<\/a> tenim un equip de desenvolupadors nadius al n\u00favol<\/strong> que us poden ajudar a desenvolupar les vostres aplicacions AWS i Azure m\u00e9s complexes.<\/p>\n","protected":false},"excerpt":{"rendered":"
En aquesta publicaci\u00f3, parlarem de les noves funcions de l’\u00faltima versi\u00f3 Angular 12, les API obsoletes i el formulari de migraci\u00f3 11 Tamb\u00e9 us pot interessar: “En temps real amb sense servidor utilitzant Websocket a AWS” Caracter\u00edstiques: Nullish Coalescing: Nullish Coalescing es va introduir primer a Typescript i els desenvolupadors van poder escriure el codi […]<\/p>\n","protected":false},"author":6,"featured_media":6634,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[196,218],"tags":[],"class_list":["post-7166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-ca","category-technical-guides-ca"],"acf":[],"yoast_head":"\nAngular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3 - 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\/ca\/angular-12-features-deprecations-migration\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3\" \/>\n<meta property=\"og:description\" content=\"En aquesta publicaci\u00f3, parlarem de les noves funcions de l’\u00faltima versi\u00f3 Angular 12, les API obsoletes i el formulari de migraci\u00f3 11 Tamb\u00e9 us pot interessar: “En temps real amb sense servidor utilitzant Websocket a AWS” Caracter\u00edstiques: Nullish Coalescing: Nullish Coalescing es va introduir primer a Typescript i els desenvolupadors van poder escriure el codi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/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=\"2024-01-10T17:09:08+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3 - 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\/ca\/angular-12-features-deprecations-migration\/","og_locale":"ca_ES","og_type":"article","og_title":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3","og_description":"En aquesta publicaci\u00f3, parlarem de les noves funcions de l’\u00faltima versi\u00f3 Angular 12, les API obsoletes i el formulari de migraci\u00f3 11 Tamb\u00e9 us pot interessar: “En temps real amb sense servidor utilitzant Websocket a AWS” Caracter\u00edstiques: Nullish Coalescing: Nullish Coalescing es va introduir primer a Typescript i els desenvolupadors van poder escriure el codi […]","og_url":"https:\/\/www.unimedia.tech\/ca\/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":"2024-01-10T17:09:08+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":{"Escrit per":"Unimedia","Temps estimat de lectura":"4 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3","datePublished":"2021-06-02T03:29:03+00:00","dateModified":"2024-01-10T17:09:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/"},"wordCount":655,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/","url":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/","name":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3 - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"2024-01-10T17:09:08+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/angular-12-features-deprecations-migration\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/angular-12-features-deprecations-migration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Angular 12: Caracter\u00edstiques, Obsolesc\u00e8ncies i Migraci\u00f3"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/#\/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\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/wp-json\/wp\/v2\/posts\/7166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7166"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6634"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}