{"id":2357,"date":"2018-09-02T14:41:42","date_gmt":"2018-09-02T12:41:42","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2357"},"modified":"2018-09-02T14:41:42","modified_gmt":"2018-09-02T12:41:42","slug":"upgrading-with-web-components-from-angularjs-to-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/","title":{"rendered":"Upgrading with Web Components: From AngularJS to Angular"},"content":{"rendered":"
\n

Upgrading from AngularJS to Angular can be challenging. Framework-independent Web Components can help here. Fortunately, Angular now allows exposing Web Components and beginning with AngularJS 1.7.3 you can easily consume them.<\/p>\n

To be more precise, we should use the word Custom Elements instead of Web Components as Web Components is an umbrella term for several standards. According to https:\/\/custom-elements-everywhere.com\/<\/a>, they really work well with AngularJS:<\/p>\n

\"AngularJS<\/p>\n

In this post, I show how to use this for migrating an AngularJS solution step by step to Angular. For this, I write new application parts with Angular and provide them as Custom Elements which are loaded into the AngularJS context:<\/p>\n

\"Sample<\/p>\n

You can tell by the logos and the dashed lines where the AngularJS and where the Angular parts are.<\/p>\n

The source code<\/a> can be found in my GitHub account<\/a>.<\/p>\n

Project Structure<\/h2>\n

The advantage of this approach is, that one doesn't need to intermingle AngularJS and Angular code. Instead, both parts of the application are written separately and the integration happens at runtime when a bundle with Custom elements is loaded.<\/p>\n

Hence, when you look at the folder structure of my example, you will find an own folder for each of those parts:<\/p>\n

\"Folder<\/p>\n

Angular Part<\/h2>\n

The Angular folder contains this component displaying a flight as shown above:<\/p>\n

@Component<\/span>({\n    templateUrl: '.\/flight-card.component.html'<\/span>\n})\nexport<\/span> class<\/span> FlightCardComponent implements<\/span> OnChanges {\n    @Input<\/span>() item: any<\/span>;\n    @Input<\/span>() selected: boolean<\/span>;\n    @Output<\/span>() selectedChange = new<\/span> EventEmitter<boolean<\/span>>();\n\n    deactivate(): void<\/span> {\n        \/\/ this.selected = false;<\/span>\n        this<\/span>.selectedChange.emit(false<\/span>);\n    }\n\n    activate(): void<\/span> {\n        \/\/ this.selected = true;<\/span>\n        this<\/span>.selectedChange.emit(true<\/span>);\n    }\n\n}\n<\/div><\/code><\/pre>\n
This component is exposed as an external web component in its module:<\/p>\n
import<\/span> { createCustomElement } from<\/span> '@angular\/elements'<\/span>;\n\n[...]\n\n@NgModule<\/span>({\n   imports: [\n      BrowserModule\n   ],\n   declarations: [\n    FlightCardComponent\n   ],\n   bootstrap: [],\n   entryComponents: [\n    FlightCardComponent\n   ]\n})\nexport<\/span> class<\/span> AppModule { \n\n    constructor<\/span>(private<\/span> injector: Injector<\/span>) {\n    }\n\n    ngDoBootstrap() {\n        const<\/span> flightCardCE = createCustomElement(FlightCardComponent, { injector: this<\/span>.injector });\n\n        customElements.define('flight-card'<\/span>, flightCardCE);\n    }\n\n}\n<\/div><\/code><\/pre>\n
As you see here, the component is not only declared but also put into the module's entryComponents<\/code> section. This is because Angular Element instantiates it dynamically at runtime.<\/p>\n
In ngDoBootstrap<\/code> which is called during bootstrapping the Angular application, createCustomElement<\/code> wraps it as a Custom Element and customElements.define<\/code> registers it with the browser.<\/p>\n
As you see in this example, when wrapping the component the current injector is passed. Hence, the component can make use of dependency injection. As Angular Element's father, Rob Wormald, pointed out in his talk at ngConf 2018<\/a>, this also allows different web components provided by the same application to communicate with each other using services.<\/p>\n
To make sure it works with every browser, I'm using the the polyfill @webcomponents\/custom-elements<\/a>.<\/p>\n
Further information<\/a> about using this polyfill, you can find in my blog article series regarding Angular Elements<\/a>.<\/p>\n
To provide the AngularJS application with the bundles, the example uses a simple npm script copying it over using the cpr<\/code> nodejs package:<\/p>\n
\"build\": \"npm run bundle:ce && npm run copy:ce\",\n\"copy:ce\": \"cpr dist\/demo ..\/angularjs\/angular-ce -d\",\n\"bundle:ce\": \"ng build --prod --output-hashing none\"\n<\/code><\/pre>\n
AngularJS part<\/h2>\n
The AngularJS application references both, the AngularJS bundle as well as the bundles from the Angular part:<\/p>\n
<!-- Bundles for Angular part --><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"angular-ce\/runtime.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"angular-ce\/polyfills.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"angular-ce\/scripts.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"angular-ce\/main.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\n\n<!-- Bundles for AngularJS part --><\/span>\n<script<\/span> src<\/span>=\"main.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\n<\/div><\/code><\/pre>\n
As it also references the polyfills bundle and the scripts bundle from the Angular part, we get the mentioned polyfills too.<\/p>\n
After this, you can use the Custom Element within the AngularJS templates:<\/p>\n
<div<\/span> ng-repeat<\/span>=\"b in $ctrl.bookings\"<\/span>><\/span>\n    <flight-card<\/span> ng-prop-item<\/span>=\"b\"<\/span> ng-prop-selected<\/span>=\"$ctrl.selection[b.id]\"<\/span> ng-on-selected_change<\/span>=\"$ctrl.change(b, $event)\"<\/span>><\/span><\/flight-card<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/div><\/code><\/pre>\n
Please have a look at the new directives ng-prop-*<\/code> and ng-on-*<\/code> which have been introduced with AngularJS 1.7.3. They allow to bind any property and any event of an (custom) element. Please also note, that the name selectedChange<\/code> becomes selected_change<\/code> here which is due to a convention of those directives.<\/p>\n
Exposing AngularJS components as Custom Elements<\/h2>\n
Ok, so far we've seen how to expose an Angular Element as an Custom Element which can be used in an AngularJS application. But what's with the other way round? Is is also possible to wrap an AngularJS component as an Custom Element?<\/p>\n
Well, while there is not an official solution for this, no one can prevent you from manually wrapping AngularJS stuff. I'm using this technique in my showcase for combinding several technologies by means of Web Components<\/a>:<\/p>\n
\"Micro<\/p>\n
As described in my article about this<\/a>, this example consists of an Angular application -- the shell -- which loads Micro Apps provided as Web Components on demand. One of those Micro Apps is the AngularJS based booking app shown above.<\/p>\n
The full source code for this micro apps example<\/a> can be found here<\/a>.<\/p>\n
Conclusion and Evaluation<\/h2>\n
Thanks to the Angular(JS) team's great support for Custom Elements, using this modern technique for migrating from AngularJS to Angular is straight forward: Just write the Angular parts in an new Angular solution and integrate them into the existing AngularJS counterpart by leveraging Custom Elements. Due to the newly introduced ng-prop-*<\/code> and ng-on-*<\/code> calling them within AngularJS is just a piece of cake.<\/p>\n
After every building block of the AngularJS part has been replaced by such a Custom Element, you can fully switch to Angular.<\/p>\n
One advantage over using ngUpgrade<\/code> is that the Angular and the AngularJS parts are not intermingled which reduces complexity. However, ngUpgrade<\/code> on the other side is more powerful. It not only allows using Angular components within AngularJS applications but also using AngularJS components within Angular applications without the need to wrap them by hand. Also, it allows mutual access to services on both sides.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Upgrading from AngularJS to Angular can be challenging. Framework-independent Web Components can help here. Fortunately, Angular now allows exposing Web Components and beginning with AngularJS 1.7.3 you can easily consume them. To be more precise, we should use the word Custom Elements instead of Web Components as Web Components is an umbrella term for several […]<\/p>\n","protected":false},"author":9,"featured_media":3010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"\nUpgrading with Web Components: From AngularJS to Angular - ANGULARarchitects<\/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.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upgrading with Web Components: From AngularJS to Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Upgrading from AngularJS to Angular can be challenging. Framework-independent Web Components can help here. Fortunately, Angular now allows exposing Web Components and beginning with AngularJS 1.7.3 you can easily consume them. To be more precise, we should use the word Custom Elements instead of Web Components as Web Components is an umbrella term for several […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-02T12:41:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1551\" \/>\n\t<meta property=\"og:image:height\" content=\"776\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Upgrading with Web Components: From AngularJS to Angular\",\"datePublished\":\"2018-09-02T12:41:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\"},\"wordCount\":783,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\",\"name\":\"Upgrading with Web Components: From AngularJS to Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png\",\"datePublished\":\"2018-09-02T12:41:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png\",\"width\":1551,\"height\":776},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upgrading with Web Components: From AngularJS to Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Upgrading with Web Components: From AngularJS to Angular - ANGULARarchitects","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.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/","og_locale":"en_US","og_type":"article","og_title":"Upgrading with Web Components: From AngularJS to Angular - ANGULARarchitects","og_description":"Upgrading from AngularJS to Angular can be challenging. Framework-independent Web Components can help here. Fortunately, Angular now allows exposing Web Components and beginning with AngularJS 1.7.3 you can easily consume them. To be more precise, we should use the word Custom Elements instead of Web Components as Web Components is an umbrella term for several […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2018-09-02T12:41:42+00:00","og_image":[{"width":1551,"height":776,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png","type":"image\/png"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Upgrading with Web Components: From AngularJS to Angular","datePublished":"2018-09-02T12:41:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/"},"wordCount":783,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/","name":"Upgrading with Web Components: From AngularJS to Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png","datePublished":"2018-09-02T12:41:42+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2018\/09\/upgrading-with-web-components-from-angularjs-to-angular.png","width":1551,"height":776},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/upgrading-with-web-components-from-angularjs-to-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Upgrading with Web Components: From AngularJS to Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2357"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/3010"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}