{"id":804,"date":"2016-04-25T09:54:51","date_gmt":"2016-04-25T07:54:51","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=804"},"modified":"2016-06-01T11:47:53","modified_gmt":"2016-06-01T09:47:53","slug":"setup-ionic-2-electron-typescript-angular2","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/","title":{"rendered":"Setup Ionic 2 with Electron (TypeScript, Angular2)"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I\u00a0decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 Material is ready it should replace Ionic 2 on Desktop and in Browser.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>1.)<\/strong> The set up with was surprisingly easy. First of all make sure to have ionic 2 installed. <\/span><\/p>\n<pre class=\"lang:default decode:true\">ionic -v<\/pre>\n<p><span style=\"line-height: 1.5;\"><strong>2.)<\/strong> To kickstart the Ionic 2 project.\u00a0<\/span>TypeScript is not required, but recommended, although you can do anything shown here with JavaScript\u00a0as well.<\/p>\n<pre class=\"lang:default decode:true\">ionic start ionic2-electron tutorial --v2 --ts<\/pre>\n<p><span style=\"line-height: 1.5;\"><strong>3.)<\/strong> Browse to your app and install electron.<\/span><\/p>\n<pre class=\"lang:default decode:true \">cd ionic2-electron\r\nnpm install electron-prebuilt --save-dev<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>4.)<\/strong> Now go to your package.json file and add the required scripts for electron to start in dev mode with auto reload and in dist without.<\/span><\/p>\n<pre class=\"lang:default decode:true\">\"scripts\": {\r\n\"electron\": \"electron .\",\r\n\"electron dist\": \"electron .\"\r\n},\r\n\"main\": \"electron.js\"\r\n<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>5.)<\/strong> So your full\u00a0package.json should\u00a0look like this:<\/span><\/p>\n<pre class=\"lang:default decode:true \">{\r\n  \"dependencies\": {\r\n    \"angular2\": \"2.0.0-beta.15\",\r\n    \"es6-shim\": \"^0.35.0\",\r\n    \"ionic-angular\": \"2.0.0-beta.6\",\r\n    \"ionic-native\": \"^1.1.0\",\r\n    \"ionicons\": \"3.0.0-alpha.3\",\r\n    \"pouchdb\": \"^5.3.2\",\r\n    \"reflect-metadata\": \"0.1.2\",\r\n    \"rxjs\": \"5.0.0-beta.2\",\r\n    \"zone.js\": \"^0.6.11\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"del\": \"2.2.0\",\r\n    \"electron-prebuilt\": \"^0.37.7\",\r\n    \"gulp\": \"3.9.1\",\r\n    \"gulp-watch\": \"4.3.5\",\r\n    \"ionic-gulp-browserify-typescript\": \"^1.0.0\",\r\n    \"ionic-gulp-fonts-copy\": \"^1.0.0\",\r\n    \"ionic-gulp-html-copy\": \"^1.0.0\",\r\n    \"ionic-gulp-sass-build\": \"^1.0.0\",\r\n    \"ionic-gulp-scripts-copy\": \"^1.0.1\",\r\n    \"run-sequence\": \"1.1.5\"\r\n  },\r\n  \"name\": \"client\",\r\n  \"description\": \"client: An Ionic project\",\r\n  \"cordovaPlugins\": [\r\n    \"cordova-plugin-device\",\r\n    \"cordova-plugin-console\",\r\n    \"cordova-plugin-whitelist\",\r\n    \"cordova-plugin-splashscreen\",\r\n    \"cordova-plugin-statusbar\",\r\n    \"ionic-plugin-keyboard\"\r\n  ],\r\n  \"cordovaPlatforms\": [\r\n    \"android\"\r\n  ],\r\n  \"scripts\": {\r\n    \"electron\": \"electron .\",\r\n    \"electron dist\": \"electron .\"\r\n  },\r\n  \"main\": \"electron.js\"\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>6.)<\/strong> Next step is to create the in \u201cmain\u201d mentioned <span class=\"lang:default decode:true crayon-inline\">electron.js <\/span>\u00a0script. This script is basically the setup for your electron app.<\/span><\/p>\n<pre class=\"\">'use strict';\r\nconst electron = require('electron');\r\n\/\/ Module to control application life.\r\nconst {app} = electron;\r\n\/\/ Module to create native browser window.\r\nconst {BrowserWindow} = electron;\r\n\r\nlet win;\r\n\r\nfunction createWindow() {\r\n    \/\/ Create the browser window.\r\n    win = new BrowserWindow({width: 800, height: 600});\r\n\r\n    var url = 'http:\/\/localhost:8100';\r\n    var Args = process.argv.slice(2);\r\n    Args.forEach(function (val) {\r\n        if (val === \"dist\") {\r\n            url = 'file:\/\/' + __dirname + '\/www\/index.html'\r\n        }\r\n    });\r\n\r\n    \/\/ and load the index.html of the app.\r\n    win.loadURL(url);\r\n\r\n    \/\/ Open the DevTools.\r\n    win.webContents.openDevTools();\r\n\r\n    \/\/ Emitted when the window is closed.\r\n    win.on('closed', () =&gt; {\r\n        \/\/ Dereference the window object, usually you would store windows\r\n        \/\/ in an array if your app supports multi windows, this is the time\r\n        \/\/ when you should delete the corresponding element.\r\n        win = null;\r\n    });\r\n}\r\n\r\n\/\/ This method will be called when Electron has finished\r\n\/\/ initialization and is ready to create browser windows.\r\n\/\/ Some APIs can only be used after this event occurs.\r\napp.on('ready', createWindow);\r\n\r\n\/\/ Quit when all windows are closed.\r\napp.on('window-all-closed', () =&gt; {\r\n    \/\/ On OS X it is common for applications and their menu bar\r\n    \/\/ to stay active until the user quits explicitly with Cmd + Q\r\n    if (process.platform !== 'darwin') {\r\n        app.quit();\r\n    }\r\n});\r\n\r\napp.on('activate', () =&gt; {\r\n    \/\/ On OS X it's common to re-create a window in the app when the\r\n    \/\/ dock icon is clicked and there are no other windows open.\r\n    if (win === null) {\r\n        createWindow();\r\n    }\r\n});<\/pre>\n<p><strong>7.)<\/strong> Your project structure will now look like this:<\/p>\n<pre class=\"lang:default decode:true\">.\r\n\u251c\u2500\u2500 app\r\n\u251c\u2500\u2500 config.xml\r\n\u251c\u2500\u2500 electron.js\r\n\u251c\u2500\u2500 gulpfile.js\r\n\u251c\u2500\u2500 hooks\r\n\u251c\u2500\u2500 ionic.config.js\r\n\u251c\u2500\u2500 ionic.config.json\r\n\u251c\u2500\u2500 node_modules\r\n\u251c\u2500\u2500 package.json\r\n\u251c\u2500\u2500 platforms\r\n\u251c\u2500\u2500 plugins\r\n\u251c\u2500\u2500 resources\r\n\u251c\u2500\u2500 tsconfig.json\r\n\u251c\u2500\u2500 typings\r\n\u251c\u2500\u2500 typings.json\r\n\u2514\u2500\u2500 www\r\n<\/pre>\n<p><strong>8.) Thats it! Now you can fire it up:<\/strong><\/p>\n<pre class=\"lang:default decode:true \"># start ionic and electron with autoreload, \r\nionic serve\r\n# open another terminal window for the npm run command! \r\nnpm run-script electron\r\n\r\n# use electron in dist \r\nionic build browser\r\nnpm run-script electron dist\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center; font-size: 14px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-806 aligncenter\" src=\"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png\" alt=\"Ionic2-and-Electron\" width=\"523\" height=\"509\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png 726w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1-300x292.png 300w\" sizes=\"auto, (max-width: 523px) 100vw, 523px\" \/>Ionic 2 running in Electron<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>Run Ionic 2 in Electron always in Windows Design<\/h2>\n<p>By default Ionic 2 runs in Material Design if no special platform is detected (e.g. when running in browser. But also when running on Linux Electron!). So you might want your electron App to run with Windows Theme on all platforms. The simplest way to do so is to add a Ionic Config Parameter to the URL. They have to be prefixed with &#8222;Ionic&#8220; and the fist letter is always uppercase. See the given example below of the modified electron.js.<\/p>\n<pre class=\"lang:default decode:true\">...\r\nfunction createWindow() {\r\n    \/\/ Create the browser window.\r\n    win = new BrowserWindow({width: 800, height: 600});\r\n\r\n    var url = 'http:\/\/localhost:8100?ionicMode=wp';\r\n    var Args = process.argv.slice(2);\r\n    Args.forEach(function (val) {\r\n        if (val === \"dist\") {\r\n            url = 'file:\/\/' + __dirname + '\/www\/index.html?ionicMode=wp'\r\n        }\r\n    });\r\n\r\n    \/\/ and load the index.html of the app.\r\n    win.loadURL(url);\r\n\r\n    \/\/ Open the DevTools.\r\n    win.webContents.openDevTools();\r\n\r\n    \/\/ Emitted when the window is closed.\r\n    win.on('closed', () =&gt; {\r\n        \/\/ Dereference the window object, usually you would store windows\r\n        \/\/ in an array if your app supports multi windows, this is the time\r\n        \/\/ when you should delete the corresponding element.\r\n        win = null;\r\n    });\r\n}\r\n...<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I\u00a0decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/\"> 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":[73,60],"tags":[74,76,77,75],"class_list":["post-804","post","type-post","status-publish","format-standard","hentry","category-angular","category-typescript","tag-angular-2","tag-electron","tag-setup","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Setup Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog<\/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.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setup Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I\u00a0decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 [...] READ MORE\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-25T07:54:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-01T09:47:53+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Setup Ionic 2 with Electron (TypeScript, Angular2)\",\"datePublished\":\"2016-04-25T07:54:51+00:00\",\"dateModified\":\"2016-06-01T09:47:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/\"},\"wordCount\":286,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Ionic2-and-Electron-1.png\",\"keywords\":[\"Angular 2\",\"Electron\",\"Setup\",\"TypeScript\"],\"articleSection\":[\"Angular\",\"TypeScript\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/\",\"name\":\"Setup Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Ionic2-and-Electron-1.png\",\"datePublished\":\"2016-04-25T07:54:51+00:00\",\"dateModified\":\"2016-06-01T09:47:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#primaryimage\",\"url\":\"http:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Ionic2-and-Electron-1.png\",\"contentUrl\":\"http:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Ionic2-and-Electron-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/setup-ionic-2-electron-typescript-angular2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setup Ionic 2 with Electron (TypeScript, Angular2)\"}]},{\"@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\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\",\"@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 Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog","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-ionic-2-electron-typescript-angular2\/","og_locale":"de_DE","og_type":"article","og_title":"Setup Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog","og_description":"Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I\u00a0decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 [...] READ MORE","og_url":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2016-04-25T07:54:51+00:00","article_modified_time":"2016-06-01T09:47:53+00:00","og_image":[{"url":"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png","type":"","width":"","height":""}],"author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"theCodeCampus","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Setup Ionic 2 with Electron (TypeScript, Angular2)","datePublished":"2016-04-25T07:54:51+00:00","dateModified":"2016-06-01T09:47:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/"},"wordCount":286,"commentCount":20,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png","keywords":["Angular 2","Electron","Setup","TypeScript"],"articleSection":["Angular","TypeScript"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/","url":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/","name":"Setup Ionic 2 with Electron (TypeScript, Angular2) - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png","datePublished":"2016-04-25T07:54:51+00:00","dateModified":"2016-06-01T09:47:53+00:00","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#primaryimage","url":"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png","contentUrl":"http:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/04\/Ionic2-and-Electron-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/setup-ionic-2-electron-typescript-angular2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Setup Ionic 2 with Electron (TypeScript, Angular2)"}]},{"@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":"de"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@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":"de","@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\/804","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=804"}],"version-history":[{"count":19,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/804\/revisions"}],"predecessor-version":[{"id":851,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/804\/revisions\/851"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}