[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"iaGaq634CU9cdL9pUcHzvOb3R60gPJuJNiGU8tCKwd0":75,"jQg1GsxvUnXWSxTuYqzMsFPxJ2LWQtSv8VXH-Zvx06o":202,"_apollo:default":242},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":142,"postWpBody":148,"wpHeaderImage":151,"wpHeaderImageOld":163,"wpHeaderImageOldSmall":172,"wpOgImage":180,"wpPromotedTeaserImage":188,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":195,"author":196},"NodeWpPost","793","Angular zu Android APK in 10 Schritten",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1579704123,"UTC","+00:00","2020-01-22T14:42:03+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1550567499,"2019-02-19T09:11:39+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/angular-zu-android-apk-in-10-schritten",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Angular zu Android APK in 10 Schritten | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/angular-zu-android-apk-in-10-schritten","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2019/02/bild-mit-text-V4-facebook.jpg?h=77465976&itok=qHAUfMFY",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":124,"processed":125,"format":126},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[143],{"__typename":144,"id":145,"name":146,"path":147,"weight":122},"TermTags","1486","webapp","/tag/webapp",{"__typename":149,"processed":150,"format":126,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wir lieben Angular. Angular ist ein Frontend-Framework für die Entwicklung komplexer Webapplikationen. Und in diesem Artikel lernt ihr, wie ihr aus eurer bereits fertig umgesetzten Angular Webapplikation, die nur im Webbrowser läuft, einfach und schnell eine mobile App entwickelt, die ihr auf euren Smartphones installieren könnt oder im App Store zum Download zur Verfügung stellen könnt. Um diesen Artikel richtig verstehen zu können, ist ein Basiswissen aus dem Bereich der Webentwicklung sehr empfehlenswert.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Einzige Voraussetzung für das Tutorial ist ein laufendes Angular Projekt mindestens mit Version 6. \u003Cem>* **\u003C/em>\u003C/span>\u003C/p>\n\u003Cp>\u003Ci>\u003Cspan style=\"font-weight: 400;\">* Keine Sorge: Das ganze ist auch möglich mit Angular Projekten ab Version 2. Dazu sind aber ein paar Anpassungen notwendig, die in diesem Artikel nicht weiter beschrieben werden. Aber für Auskünfte stehen wir gerne \u003Ca href=\"mailto:c.thalmann@liechtenecker.at?subject=Angular%20to%20Android%20-%20Liechtenecker%20Blog\">zur Verfügung\u003C/a>.\u003C/span>\u003C/i>\u003Cbr>\u003C/p>\u003Cp>\n\u003Ci>\u003Cspan style=\"font-weight: 400;\">** Falls ihr gerade kein laufendes Angular Projekt zur Verfügung habt, auch kein Problem. Einfach die aktuellste Angular \u003Ca href=\"https://cli.angular.io/\" target=\"_blank\" rel=\"noopener noreferrer\">CLI\u003C/a> \u003C/span>\u003C/i>\u003Ci>\u003Cspan style=\"font-weight: 400;\">installieren und mit „\u003C/span>\u003C/i>\u003Ci>\u003Cspan style=\"font-weight: 400;\">ng new hello-app-world“\u003C/span>\u003C/i>\u003Ci>\u003Cspan style=\"font-weight: 400;\"> eine Test-Applikation erstellen.\u003C/span>\u003C/i>\u003Cbr>\u003C/p>\u003Cp>\n\u003Cspan style=\"font-weight: 400;\">Dieses Tutorial ist eine Schritt-für-Schritt Anleitung, wie ihr eure Angular Projekte, die bisher nur im Browser liefen, nun auch wirklich als App für Android deployen könnt. Bitte behaltet im Hinterkopf, dass solche Dinge wie Schritt-für-Schritt Anleitungen in der Webentwicklung immer etwas sehr relatives sind. Es gibt an mehreren Stellen viel zu viele Unterschiede (zb. neue/alte Versionen, verschiedene Projektsetups oder Projektstrukturen, unterschiedliche Betriebssysteme, etc.) um eine einheitliche One-Fits-All-Anleitung schreiben zu können. Also zeigt Selbstcourage und arbeitet auch zwischen den Schritten mit. Nevertheless, let’s get started!\u003C/span>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Col>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Installiert \u003Ca href=\"https://developer.android.com/studio/install\" target=\"_blank\" rel=\"noopener noreferrer\">Android Studio \u003C/a>\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Installiert Cordova\u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">npm install -g cordova\u003C/pre>\n\u003Cp> \u003C/p>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Erstellt ein neues Cordova Projekt\u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">cordova create hello-app-world-cordova com.example.hello OurFirstApp\u003C/pre>\n\u003Cp> \u003C/p>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Im neu erstellten Cordova Projekt die Ziel-Plattform eurer mobilen App hinzufügen. In diesem Tutorial wollen wir eine Android APK entwickeln.\u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">cordova platform add android\u003C/pre>\n\u003Cp> \u003C/p>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Jetzt wird das neue erstellte Cordova Projekt mit dem Angular Projekt fusioniert. Dazu alle Files im Verzeichnis des Cordova Projektes \u003C/span>\u003Cb>in\u003C/b>\u003Cspan style=\"font-weight: 400;\"> das Angular Projekt kopieren. Achtung: \u003Cem>package.json, package-lock.json\u003C/em> und den \u003Cem>node_modules\u003C/em> Ordner nicht kopieren!\u003Cbr>\n\u003C/span>Die Ordnerstruktur eures Angular Projektes sollte nun in etwa so aussehen:\u003Cbr>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png?itok=cfg84E5k\" data-rel=\"lightbox-gallery-BOYUkClM\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"Angular Projekt Ordnerstruktur\" data-entity-type=\"media\" data-entity-uuid=\"30c264f3-b36e-410b-888b-0afbff86487c\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=I5_MP3ao 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=fQ5-Edtj 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"911\" height=\"517\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=Egf1ZRBr 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=3bMSyAoL 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"911\" height=\"517\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=MG8C-EQM 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=4-Wfbp49 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"423\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=_hn6NoHI 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=pKmxiq0Z 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"272\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=pYVpmmgm 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.webp?itok=TLedl1O0 2x\" type=\"image/webp\" width=\"911\" height=\"517\">\n                  \u003Cimg loading=\"lazy\" width=\"911\" height=\"517\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/ordnerstruktur.png.jpg?itok=TLedl1O0\" alt=\"Angular Projekt Ordnerstruktur\" title=\"Angular Projekt Ordnerstruktur\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Nun das \u003Cem>package.json\u003C/em> des Cordova Projektes \u003C/span>\u003Cb>in\u003C/b>\u003Cspan style=\"font-weight: 400;\"> das \u003Cem>package.json\u003C/em> des Angular Projektes mergen. Überschreibt den \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">name\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> des Angular\u003Cem> package.json\u003C/em> mit dem \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">name\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> des Cordova \u003Cem>package.json\u003C/em>. Das \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">script\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> Objekt des Cordova \u003Cem>package.json\u003C/em> müsst ihr nicht in das Angular \u003Cem>package.json\u003C/em> kopieren.\u003Cbr>\n\u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Das gemergte \u003Cem>package.json\u003C/em> sollte nun in etwa so aufgebaut sein:\u003Cbr>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2019/02/packagejson.png?itok=avDoRm-Y\" data-rel=\"lightbox-gallery-BOYUkClM\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"packagejson Aufbau\" data-entity-type=\"media\" data-entity-uuid=\"1ece4d29-2f20-4897-8142-4216928ca717\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=ji9-7VSJ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=KRnNBRJn 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1047\" height=\"945\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=Rj4yj0no 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=2Ctyxl1V 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"924\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=xwoRA0cy 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=QGJWNAYH 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"672\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=dGmntPPf 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=Kb_1dLD8 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"433\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=2dYH82IL 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.webp?itok=uivTuK5Q 2x\" type=\"image/webp\" width=\"1047\" height=\"945\">\n                  \u003Cimg loading=\"lazy\" width=\"1047\" height=\"945\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/packagejson.png.jpg?itok=uivTuK5Q\" alt=\"packagejson Aufbau\" title=\"packagejson Aufbau\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\n\u003C/span>\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Öffnet die \u003Cem>index.html\u003C/em> des Angular Projektes und ändert den \u003Cem>base href\u003C/em> von \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\"><base href=”/”>\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> auf:\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\"><base href=”./”>\u003C/pre>\n\u003Cp> \u003C/p>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Nun müssen wir den Ziel-Pfad unseres gebauten Angular Projektes ändern. Geht dazu in das \u003Cem>angular.json\u003C/em> und ändert den \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">outputPath\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> auf “\u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">www\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">”\u003C/span>\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Genug vom Setup. Nun müssen wir das Projekt builden. Beide Befehle im Verzeichnis des Angular Projektes ausführen:\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">ng build --prod --aot\ncordova build android\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wenn ihr mit einer Angular Verison über 8 arbeitet, müsst ihr noch in der \u003Cem>tsconfig.json\u003C/em> das Compile Target auf \u003Cem>es5\u003C/em> (ES5) ändern.\u003Cbr>\n\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">\"target\": \"es5\"\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">(Weil Angular über Version 8 compiled standardmäßig für ES6 (es2015), aber Android Emulatoren haben Probleme mit ES6)\u003Cbr>\n\u003C/span>\u003C/p>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">Jetzt ist eure APK zum Testen fertig erstellt. Zum Testen brauchen wir allerdings ein laufendes virtuelles Android Device. Öffnet dazu Android Studio. Öffnet nun den Android Virtual Device Manager. Erstellt euch ein neues virtuelles Device (Hardware und Android Version nach eurem Belieben) und startet das Gerät. Sobald das virtuelle Gerät gebootet hat, könnt ihr im Angular Verzeichnis die Test-APK starten\u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Cbr>\n\u003C/span>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">cordova emulate android\u003C/pre>\n\u003Cp> \u003C/p>\u003C/li>\n\u003C/ol>\u003Cp>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">That’s it. Nun sollte euer Angular Projekt am virtuellen Gerät als App starten.\u003C/span>\u003C/p>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2019/02/emulated.png?itok=D9AeTfVY\" data-rel=\"lightbox-gallery-BOYUkClM\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"Entwicklungsumgebung mit virtuellem Android Gerät\" data-entity-type=\"media\" data-entity-uuid=\"70ba6957-e271-499d-84d4-10774834fc7f\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=FEif0xr7 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=3EWNkCKg 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"810\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=tnmnvU6K 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=PEx4-c5y 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"576\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=U0wkcH5P 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=78oBwK2_ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"419\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=HTH_RoLA 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=tLNpu9Pw 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"270\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=43yg51Cv 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.webp?itok=KKxtvmsM 2x\" type=\"image/webp\" width=\"1620\" height=\"911\">\n                  \u003Cimg loading=\"lazy\" width=\"1920\" height=\"1080\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2019/02/emulated.png.jpg?itok=KKxtvmsM\" alt=\"Entwicklungsumgebung mit virtuellem Android Gerät\" title=\"Entwicklungsumgebung mit virtuellem Android Gerät\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">So einfach gehts. Mit diesen wenigen Schritten könnt ihr euer Angular Projekt als Hybrid App in eine Android App für Smartphones umwandeln. Das ganze geht auch ganz einfach mit anderen Plattform wie zum Beispiel Apple IOS. Bei Fragen stehen wir auch gerne wieder \u003Ci>\u003Ca href=\"mailto:c.thalmann@liechtenecker.at?subject=Angular%20to%20Android%20-%20Liechtenecker%20Blog\">zur Verfügung\u003C/a>\u003C/i>.\u003C/span>\u003C/p>\n\u003Ch2>App unterzeichnen\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ein kleiner Schritt steht noch aus: Unsere Test-APK funktioniert zurzeit nur auf virtuellen Android Geräten. Damit wir die APK auch auf echten Hardware Android Geräte installieren können bzw. im Play Store verfügbar machen können, müssen wir die App releasen und unterzeichnen lassen. Eine nicht-unterzeichnete APK lässt sich unter Android nicht installieren. Aber wir können unsere APK ganz einfach selbst unterzeichnen.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Folgenden Befehl ausführen:\u003Cbr>\n\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">cordova build --release android\u003C/pre>\n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Dieser Befehl erstellt die für den Release fertige APK unter \u003Cem>platforms/android/app/build/outputs/apk/release\u003C/em>. Aber diese APK ist noch nicht unterzeichnet. Dafür müssen wir einen Keystore generieren:\u003Cbr>\n\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">keytool -genkey -v -keystore helloappworld.keystore -alias helloappworldmobileapps -keyalg RSA -keysize 2048 -validity 10000\u003C/pre>\n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Alle für den Keystore gefragten Informationen gewissenhaft ausfüllen. Nun muss der eben generierte Keystore auf unsere APK angewendet werden:\u003Cbr>\n\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore helloappworld.keystore app-release-unsigned.apk helloappworldmobileapps\u003C/pre>\n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Nun müssen wir noch die wirkliche unterzeichnete APK extrahieren:\u003Cbr>\n\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em; padding: 20px 40px;\">zipalign -v 4 app-release-unsigned.apk app-release-signed.apk\u003C/pre>\n\u003Cp>Falls ihr den zipalign Befehl nicht ausführen könnt, habt ihr vermutlich die \u003Cem>$ANDROID_HOME\u003C/em> Variable falsch konfiguriert. Mit \u003Cem>find ~/Library/Android/sdk/build-tools -name „zipalign”\u003C/em> könnt ihr ganz einfach den Pfad von \u003Cem>zipalign\u003C/em> finden, und diesen kopieren und beim vorherigen Befehl einsetzen.\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">That’s it. Nun habt ihr eure release-fertige und unterzeichnete APK, die ihr auf eurem Android Smartphone installieren könnt. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Jetzt könnt ihr natürlich eure Android App weiterentwickeln und optimieren. Schaut euch dafür die \u003Ca href=\"https://cordova.apache.org/docs/en/latest/\" target=\"_blank\" rel=\"noopener noreferrer\">Cordova Docs\u003C/a>\u003C/span>\u003Cspan style=\"font-weight: 400;\"> durch. Ihr könnt noch viele coole Plugins aktivieren und Features wie Push-Notifications, Vibrations-Feedback und Splashscreens nutzen oder auch einfache Dinge wie Farbe der Status-Bar einstellen.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ihr könnt euch auch den \u003Ca href=\"https://github.com/christof-thalmann/angular-to-apk\" target=\"_blank\" rel=\"noopener noreferrer\">Source Code zu einem Demo Projekt\u003C/a> hier ansehen. In der Read-Me ist der Setup-Prozess sowie der Build-Prozess sehr detailliert beschrieben.\u003Cbr>\nGerne könnt ihr eine technisch-tiefergreifende Version \u003Ca href=\"https://medium.com/@christof.thalmann/convert-angular-project-to-android-apk-in-10-steps-c49e2fddd29\" target=\"_blank\" rel=\"noopener noreferrer\">hier\u003C/a> lesen.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ich hoffe, ich konnte euch eine gute Anleitung geben. Falls ihr Optimierungsvorschläge oder andere Einwände habt, freue ich mich sehr über euer Feedback. Und bei Problemen oder offenen Fragen, scheut euch nicht nachzufragen.\u003C/span>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n",{"__typename":152,"id":153,"excludeFromScreenreader":13,"mediaImage":154,"name":159,"path":162,"status":20},"MediaImage","980",{"__typename":155,"url":156,"width":157,"height":158,"alt":159,"title":159,"size":160,"mime":161},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2019/02/bild-header-new.jpg",2880,1300,"Angular to Android",403009,"image/jpeg","/media/980/edit",{"__typename":152,"id":164,"excludeFromScreenreader":13,"mediaImage":165,"name":169,"path":171,"status":20},"1119",{"__typename":155,"url":166,"width":167,"height":168,"alt":169,"title":169,"size":170,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2019/02/bild-mit-text-V4-headerlarge.jpg",5184,1361,"angular-to-android",1082099,"/media/1119/edit",{"__typename":152,"id":173,"excludeFromScreenreader":13,"mediaImage":174,"name":169,"path":179,"status":20},"1118",{"__typename":155,"url":175,"width":176,"height":177,"alt":169,"title":169,"size":178,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2019/02/bild-mit-text-V4-headersmall-compressed.jpg",1920,1079,484210,"/media/1118/edit",{"__typename":152,"id":181,"excludeFromScreenreader":13,"mediaImage":182,"name":169,"path":187,"status":20},"1117",{"__typename":155,"url":183,"width":184,"height":185,"alt":13,"title":169,"size":186,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2019/02/bild-mit-text-V4-facebook.jpg",3268,1710,292445,"/media/1117/edit",{"__typename":152,"id":189,"excludeFromScreenreader":13,"mediaImage":190,"name":159,"path":194,"status":20},"993",{"__typename":155,"url":191,"width":176,"height":192,"alt":159,"title":159,"size":193,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2019/02/bild-promoted.jpg",1531,180780,"/media/993/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Bestehendes Angular Projekt mithilfe von Cordova als hybrid App umbauen. In nur 10 Schritten zu einer Smartphone App für Android (APK).\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Angular zu Android APK in 10 Schritten - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Bestehendes Angular Projekt mithilfe von Cordova als hybrid App umbauen. In nur 10 Schritten zu einer Smartphone App für Android (APK).\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2019-02-19T10:11:39+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2020-01-22T15:42:03+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2019/02/ordnerstruktur.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2019/02/ordnerstruktur.png\",\"width\":911,\"height\":517,\"caption\":\"Angular Projekt Ordnerstruktur\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/\",\"name\":\"Angular zu Android APK in 10 Schritten - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/#primaryimage\"},\"datePublished\":\"2019-02-19T10:11:39+00:00\",\"dateModified\":\"2020-01-22T15:42:03+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/75ed6ebea3f085adaae10aef7dd048dc\"},\"description\":\"Bestehendes Angular Projekt mithilfe von Cordova als hybrid App umbauen. In nur 10 Schritten zu einer Smartphone App f\\u00fcr Android (APK).\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/angular-zu-android-apk-in-10-schritten/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/75ed6ebea3f085adaae10aef7dd048dc\",\"name\":\"Christof\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/917123011dcdb8b85a4f25a00ea88c8c?s=96&d=mm&r=g\",\"caption\":\"Christof\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":197,"id":198,"myRole":199,"name":200,"nickname":201},"User","3","Quoten-Kärntner","c-thalmann","Christof",{"latestKnowhow":203},[204,217,230],{"__typename":79,"id":205,"title":206,"path":207,"wpTeaserText":208,"wpPromotedTeaserImage":13,"wpHeaderImage":209},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":152,"id":210,"excludeFromScreenreader":13,"mediaImage":211,"name":215,"path":216,"status":20},"3364",{"__typename":155,"url":212,"width":157,"height":158,"alt":213,"title":13,"size":214,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg","Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":218,"title":219,"path":220,"wpTeaserText":221,"wpPromotedTeaserImage":13,"wpHeaderImage":222},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":152,"id":223,"excludeFromScreenreader":13,"mediaImage":224,"name":228,"path":229,"status":20},"3355",{"__typename":155,"url":225,"width":157,"height":158,"alt":226,"title":13,"size":227,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":231,"title":232,"path":233,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":234},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":152,"id":235,"excludeFromScreenreader":21,"mediaImage":236,"name":240,"path":241,"status":20},"3303",{"__typename":155,"url":237,"width":157,"height":158,"alt":238,"title":13,"size":239,"mime":161},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":243,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":244,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":248,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":251,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":254,"Menu:footer":257,"ROOT_QUERY":267,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":283,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":286,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":289,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":292,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":295,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":298,"Menu:nuxt-main-menu":301,"TermCategories:7":315,"TermTags:1486":326,"MediaImage:980":327,"MediaImage:1119":329,"MediaImage:1118":331,"MediaImage:1117":333,"MediaImage:993":335,"User:3":337,"NodeWpPost:793":338,"MediaImage:3364":369,"NodeWpPost:1619":371,"MediaImage:3355":374,"NodeWpPost:1616":376,"MediaImage:3303":379,"NodeWpPost:1606":381},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",245,"internal",20,"expanded",21,"attributes",247],{"__ref":246},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",249,"internal",20,"expanded",21,"attributes",250],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",252,"internal",20,"expanded",21,"attributes",253],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",255,"internal",21,"expanded",21,"attributes",256],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",258],[259,261,263,265],{"__ref":260},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":262},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":264},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":266},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",268,"menu({\"name\":\"FOOTER\"})",269,"menu({\"name\":\"NUXT_MAIN_MENU\"})",271,"route({\"path\":\"/blog/angular-zu-android-apk-in-10-schritten\"})",273,"latestKnowhow({\"excludeId\":\"793\",\"limit\":3})",276],"Query",{"__ref":270},"Menu:footer",{"__ref":272},"Menu:nuxt-main-menu",["null","__typename",77,"entity",274],{"__ref":275},"NodeWpPost:793",[277,279,281],{"__ref":278},"NodeWpPost:1619",{"__ref":280},"NodeWpPost:1616",{"__ref":282},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",284,"internal",20,"expanded",21,"attributes",285],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",287,"internal",20,"expanded",21,"attributes",288],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",290,"internal",20,"expanded",21,"attributes",291],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",293,"internal",20,"expanded",21,"attributes",294],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",296,"internal",20,"expanded",21,"attributes",297],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",299,"internal",20,"expanded",21,"attributes",300],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",302],[303,305,307,309,311,313],{"__ref":304},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":306},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":308},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":310},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":312},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":314},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",316,"langcode",317,"changed",318,"metatag",319],["null","__typename",124,"processed",125,"format",126],{"__ref":246},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[320,322,324],["null","__typename",95,"tag",96,"attributes",321],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",323],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",325],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",144,"id",145,"name",146,"path",147,"weight",122],["null","__typename",152,"id",153,"excludeFromScreenreader",13,"mediaImage",328,"name",159,"path",162,"status",20],["null","__typename",155,"url",156,"width",157,"height",158,"alt",159,"title",159,"size",160,"mime",161],["null","__typename",152,"id",164,"excludeFromScreenreader",13,"mediaImage",330,"name",169,"path",171,"status",20],["null","__typename",155,"url",166,"width",167,"height",168,"alt",169,"title",169,"size",170,"mime",161],["null","__typename",152,"id",173,"excludeFromScreenreader",13,"mediaImage",332,"name",169,"path",179,"status",20],["null","__typename",155,"url",175,"width",176,"height",177,"alt",169,"title",169,"size",178,"mime",161],["null","__typename",152,"id",181,"excludeFromScreenreader",13,"mediaImage",334,"name",169,"path",187,"status",20],["null","__typename",155,"url",183,"width",184,"height",185,"alt",13,"title",169,"size",186,"mime",161],["null","__typename",152,"id",189,"excludeFromScreenreader",13,"mediaImage",336,"name",159,"path",194,"status",20],["null","__typename",155,"url",191,"width",176,"height",192,"alt",159,"title",159,"size",193,"mime",161],["null","__typename",197,"id",198,"myRole",199,"name",200,"nickname",201],["null","__typename",79,"id",80,"title",81,"changed",339,"created",340,"langcode",341,"path",92,"promote",21,"status",20,"sticky",21,"metatag",342,"category",351,"contentElements",13,"evergreen",13,"tags",353,"wpBody",356,"wpHeaderImage",357,"wpHeaderImageOld",359,"wpHeaderImageOldSmall",361,"wpOgImage",363,"wpPromotedTeaserImage",365,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",195,"author",367],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":246},[343,345,347,349],["null","__typename",95,"tag",96,"attributes",344],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",346],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",348],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",350],["null","__typename",111,"property",115,"content",116],{"__ref":352},"TermCategories:7",[354],{"__ref":355},"TermTags:1486",["null","__typename",149,"processed",150,"format",126,"summary",13],{"__ref":358},"MediaImage:980",{"__ref":360},"MediaImage:1119",{"__ref":362},"MediaImage:1118",{"__ref":364},"MediaImage:1117",{"__ref":366},"MediaImage:993",{"__ref":368},"User:3",["null","__typename",152,"id",210,"excludeFromScreenreader",13,"mediaImage",370,"name",215,"path",216,"status",20],["null","__typename",155,"url",212,"width",157,"height",158,"alt",213,"title",13,"size",214,"mime",161],["null","__typename",79,"id",205,"title",206,"path",207,"wpTeaserText",208,"wpPromotedTeaserImage",13,"wpHeaderImage",372],{"__ref":373},"MediaImage:3364",["null","__typename",152,"id",223,"excludeFromScreenreader",13,"mediaImage",375,"name",228,"path",229,"status",20],["null","__typename",155,"url",225,"width",157,"height",158,"alt",226,"title",13,"size",227,"mime",161],["null","__typename",79,"id",218,"title",219,"path",220,"wpTeaserText",221,"wpPromotedTeaserImage",13,"wpHeaderImage",377],{"__ref":378},"MediaImage:3355",["null","__typename",152,"id",235,"excludeFromScreenreader",21,"mediaImage",380,"name",240,"path",241,"status",20],["null","__typename",155,"url",237,"width",157,"height",158,"alt",238,"title",13,"size",239,"mime",161],["null","__typename",79,"id",231,"title",232,"path",233,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",382],{"__ref":383},"MediaImage:3303"]