{"id":699,"date":"2016-02-22T09:24:40","date_gmt":"2016-02-22T08:24:40","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=699"},"modified":"2025-04-22T10:28:06","modified_gmt":"2025-04-22T08:28:06","slug":"setup-nativescript-and-angular-2","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/","title":{"rendered":"Setup NativeScript and Angular 2"},"content":{"rendered":"<p>NativeScript came up as a framework to write native mobile Apps for Android and iOS, and they even want to come up with\u00a0Windows 10 support in March 2016.<br \/>\nMy colleague described first steps in NativeScript in his <span style=\"text-decoration: underline; color: #ff9900;\"><a style=\"color: #ff9900; text-decoration: underline;\" href=\"https:\/\/blog.thecodecampus.de\/building-cross-platform-mobile-apps-with-nativescript\/\" target=\"_blank\" rel=\"noopener noreferrer\">article<\/a><\/span> back in December.<\/p>\n<p>Today I want to show you, how to setup your NativeScript + TypeScript + Angular2 Project and in another blog post I show you some basic features.<\/p>\n<p>The main problem at the moment is: NativeScript supports Angular 2 beta, but there are only some example projects on the telerik github repo.<br \/>\nThere is no template to create a Angular2 and Typescript from <em>tns-cli, <\/em>so we use a basic template from github for a NativeScript and Typescript and then add the needed Angular2 dependecies.<\/p>\n<h1><strong><br \/>\nSetup<br \/>\n<\/strong><\/h1>\n<p>The setup is for android, but you can replace all android commands with the according ios commands, it should work fine.<\/p>\n<h2>NativeScript and TypeScript<\/h2>\n<ol>\n<li>You need to setup NativeScript on your machine, follow this <a href=\"https:\/\/docs.nativescript.org\/setup\/\" target=\"_blank\" rel=\"noopener noreferrer\">Setup-Guide<\/a>.<\/li>\n<li>Update NativeScript with <span class=\"lang:sh decode:true crayon-inline \">npm install -g nativescript<\/span><\/li>\n<li>Because there is no direct template included into the NativeScript-CLI, you need to clone a template provided by a telerik worker on github. (<a href=\"https:\/\/github.com\/hdeshev\/nativescript-ts-hello\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/hdeshev\/nativescript-ts-hello<\/a>)<\/li>\n<li>Switch into the folder and:\n<ul>\n<li>go into the <span class=\"lang:default decode:true crayon-inline \">package.json<\/span>\u00a0 and update the dependencies:<br \/>\n<span class=\"lang:default decode:true crayon-inline \">&#8220;tns-core-modules&#8221;: &#8220;^1.5.2&#8221;<\/span>\u00a0 to <span class=\"lang:sh decode:true crayon-inline \">&#8220;tns-core-modules&#8221;: &#8220;^1.6.1-angular-0&#8221;<\/span><\/li>\n<li>run <span class=\"lang:sh decode:true crayon-inline \">npm install<\/span>\u00a0\u00a0in console<\/li>\n<li>run <span class=\"lang:sh decode:true crayon-inline \">tns platform add android<\/span>\u00a0\u00a0in console<\/li>\n<li>run <span class=\"lang:default decode:true crayon-inline \">grunt app-full<\/span>\u00a0\u00a0in console<\/li>\n<\/ul>\n<\/li>\n<li>now you can fire up your emulator and type <span class=\"lang:sh decode:true crayon-inline \">tns run android<\/span>\u00a0, hopefully you will see a basic app<\/li>\n<\/ol>\n<p>Congratulations you set up a NativeScript + TypeScript project.<\/p>\n<p>The provided grunt build copies all files from <span class=\"lang:default decode:true crayon-inline \">src<\/span>\u00a0 to the <span class=\"lang:default decode:true crayon-inline \">app<\/span>\u00a0 folder, so only change the files in <span class=\"lang:default decode:true crayon-inline\">src<\/span>.<\/p>\n<p><a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\" style=\"display: inline-block;\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_big.png\" media=\"(min-width: 1024px)\"><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_medium.png\" media=\"(min-width: 600px)\"><img decoding=\"async\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png\" alt=\"Angular Schulungen\" class=\"alignnone size-full wp-image-38\">\n<\/picture>\n<\/a><\/p>\n<h2>NativeScript and Angular2<\/h2>\n<p>To change the build to Angular2 we need some more dependencies and commands.<br \/>\nYou can find a basic instruction <a href=\"https:\/\/www.npmjs.com\/package\/nativescript-angular#bootstrapping-an-angular-app-with-nativescript\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>, but the dependencies are not up-to-date, so we copy them from this <a href=\"https:\/\/github.com\/NativeScript\/nativescript-app-templates\/tree\/master\/packages\/template-hello-world-ng\" target=\"_blank\" rel=\"noopener noreferrer\">NativeScript Angular2 template<\/a>.<\/p>\n<p>Go into your <span class=\"lang:default decode:true crayon-inline \">package.json<\/span>\u00a0 and add\/change following dependencies:<\/p>\n<pre class=\"\">\"devDependencies\": {\r\n   \"grunt\": \"0.4.5\",\r\n   \"grunt-contrib-copy\": \"0.8.2\",\r\n   \"grunt-shell\": \"1.1.2\",\r\n   \"grunt-ts\": \"5.3.2\",\r\n   \"nativescript-dev-typescript\": \"^0.3.0\",\r\n   \"typescript\": \"^1.7.5\"\r\n},\r\n\"dependencies\": {\r\n   \"tns-core-modules\": \"^1.6.1-angular-0\",\r\n   \"nativescript-angular\": \"0.0.32\",\r\n   \"angular2\": \"2.0.0-beta.6\",\r\n   \"parse5\": \"1.4.2\",\r\n   \"punycode\": \"1.3.2\",\r\n   \"querystring\": \"0.2.0\",\r\n   \"url\": \"0.10.3\",\r\n   \"reflect-metadata\": \"0.1.2\",\r\n   \"rxjs\": \"5.0.0-beta.0\",\r\n   \"zone.js\": \"0.5.14\"\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Again type <span class=\"lang:sh decode:true crayon-inline\">npm install<\/span>, to update the dependencies.<\/p>\n<p>Now you can get the TypeScript declarations via: (<span class=\"lang:sh decode:true crayon-inline\">npm install -g tsd<\/span>)<\/p>\n<pre class=\"lang:sh decode:true \">&gt; tsd install angular2 rx es6-promise --save\r\n&gt; tsd link<\/pre>\n<p>&nbsp;<\/p>\n<p>Now go into the <span class=\"lang:default decode:true crayon-inline \">src<\/span>\u00a0 folder with your favorite IDE:<\/p>\n<p>Remove <span class=\"lang:default decode:true crayon-inline \">main-page.xml<\/span>\u00a0 and <span class=\"lang:default decode:true crayon-inline \">main-view-model.ts<\/span>\u00a0,\u00a0they are\u00a0not needed anymore.<\/p>\n<p>Go into <span class=\"lang:default decode:true crayon-inline \">app.ts<\/span>\u00a0, we need to bootstrap Angular2 now:<\/p>\n<pre class=\"lang:js decode:true\" title=\"app.ts\">\/\/ this import should be first in order to load some required settings (like globals and reflect-metadata)\r\nimport {nativeScriptBootstrap} from \"nativescript-angular\/application\";\r\nimport {MainComponent} from \".\/main-page\";\r\n\r\nnativeScriptBootstrap(MainComponent);<\/pre>\n<p>&nbsp;<\/p>\n<p>Go into <span class=\"lang:default decode:true crayon-inline \">main-page.ts<\/span>\u00a0and replace the content with:<\/p>\n<pre class=\"lang:js decode:true\">import {Component} from \"angular2\/core\";\r\n\r\n@Component({\r\nselector: \"my-app\",\r\ntemplate: `\r\n&lt;StackLayout orientation=\"vertical\"&gt;\r\n&lt;Label [text]=\"message\" class=\"title\" (tap)=\"message = 'OHAI'\"&gt;&lt;\/Label&gt;\r\n&lt;\/StackLayout&gt;\r\n`,\r\n})\r\nexport class MainComponent {\r\npublic message: string = \"Hello, Angular!\";\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Create the file <span class=\"lang:default decode:true crayon-inline\">compat.d.ts<\/span>\u00a0in the <span class=\"lang:default decode:true crayon-inline \">src<\/span>\u00a0folder with following content:<\/p>\n<pre class=\"lang:js decode:true\">\/\/ Angular 2 compatibility types\r\ndeclare type MapConstructor = typeof Map;\r\ndeclare type SetConstructor = typeof Set;<\/pre>\n<p>&nbsp;<\/p>\n<p>The content is based on the <a href=\"https:\/\/github.com\/NativeScript\/nativescript-app-templates\/tree\/master\/packages\/template-hello-world-ng\" target=\"_blank\" rel=\"noopener noreferrer\">Angular2 Hello World NG<\/a> example provided by NativeScript.<\/p>\n<p>Now run <span class=\"lang:sh decode:true crayon-inline\">grunt app-full<\/span>\u00a0and <span class=\"lang:default decode:true crayon-inline \">tns run android<\/span>\u00a0 in your console.<\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/02\/NativeScriptAngular.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-703\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/02\/NativeScriptAngular-169x300.png\" alt=\"NativeScriptAngular\" width=\"174\" height=\"309\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/02\/NativeScriptAngular-169x300.png 169w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/02\/NativeScriptAngular-576x1024.png 576w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/02\/NativeScriptAngular.png 1080w\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" \/><\/a><\/p>\n<p>Congratulations you set up NativeScript + TypeScript + Angular2.<\/p>\n<p>Stay tuned for the upcoming blog post with an NativeScript and Angular2 App.<\/p>\n<h1><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>NativeScript came up as a framework to write native mobile Apps for Android and iOS, and they even want to come up with\u00a0Windows 10 support in March 2016. My colleague described first steps in NativeScript in his article back in December. Today I want to show you, how to setup your NativeScript + TypeScript + [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,2,63,60],"tags":[74,61,80],"class_list":["post-699","post","type-post","status-publish","format-standard","hentry","category-angularjs","category-javascript","category-nativescript","category-typescript","tag-angular-2","tag-javascript","tag-nativescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Setup NativeScript and Angular 2 - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Unlock NativeScript &amp; Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!\" \/>\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.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setup NativeScript and Angular 2 - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Unlock NativeScript &amp; Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-22T08:24:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:28:06+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Setup NativeScript and Angular 2\",\"datePublished\":\"2016-02-22T08:24:40+00:00\",\"dateModified\":\"2025-04-22T08:28:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/\"},\"wordCount\":448,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"keywords\":[\"Angular 2\",\"JavaScript\",\"NativeScript\"],\"articleSection\":[\"AngularJS 1\",\"JavaScript\",\"NativeScript\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/\",\"name\":\"Setup NativeScript and Angular 2 - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"datePublished\":\"2016-02-22T08:24:40+00:00\",\"dateModified\":\"2025-04-22T08:28:06+00:00\",\"description\":\"Unlock NativeScript & Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-nativescript-and-angular-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setup NativeScript and Angular 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Setup NativeScript and Angular 2 - Web Development Blog","description":"Unlock NativeScript & Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!","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.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/","og_locale":"en_US","og_type":"article","og_title":"Setup NativeScript and Angular 2 - Web Development Blog","og_description":"Unlock NativeScript & Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2016-02-22T08:24:40+00:00","article_modified_time":"2025-04-22T08:28:06+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Setup NativeScript and Angular 2","datePublished":"2016-02-22T08:24:40+00:00","dateModified":"2025-04-22T08:28:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/"},"wordCount":448,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","keywords":["Angular 2","JavaScript","NativeScript"],"articleSection":["AngularJS 1","JavaScript","NativeScript","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/","url":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/","name":"Setup NativeScript and Angular 2 - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","datePublished":"2016-02-22T08:24:40+00:00","dateModified":"2025-04-22T08:28:06+00:00","description":"Unlock NativeScript & Angular 2 synergy. Effortless setup for powerful cross-platform app development. Start coding seamlessly now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-nativescript-and-angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Setup NativeScript and Angular 2"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=699"}],"version-history":[{"count":34,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/699\/revisions"}],"predecessor-version":[{"id":3435,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/699\/revisions\/3435"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}