{"id":860,"date":"2016-06-06T10:25:33","date_gmt":"2016-06-06T08:25:33","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=860"},"modified":"2023-12-20T20:18:08","modified_gmt":"2023-12-20T19:18:08","slug":"ionic2-angular2-translate-internationalize-localize-app","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/","title":{"rendered":"Ionic2 &#038; Angular2 Translate &#8211; Internationalize and Localize Your App"},"content":{"rendered":"<p>Setting up Ionic 2 with angular2-translate is pretty simple. But since there were a lot of changes in the recent time and most of the code examples provided in other blogs is already outdated i decided to describe the latest working approach. Currently i&#8217;m using angular2rc.1. Since Anuglar has reached RC status there should be no more breaking API\u00a0changes and this approach stays valid. Ionic2 on the other hand is still in Beta. Im working with\u00a0&#8220;ionic-angular&#8221;: <del>&#8220;2.0.0-beta.7&#8221;\u00a0<\/del> <strong><em>update<\/em>\u00a02.0.0.beta.8 <em>update<\/em><\/strong>\u00a0(you can get this information from package.json). I&#8217;m working with TypeScript and you should too!<\/p>\n<p>&nbsp;<\/p>\n<p>The code of the example is available here &#8211; every step is also available as separat commit, see readme:<br \/>\n<strong><a href=\"https:\/\/github.com\/CanKattwinkel\/ionic2-translate-example\">https:\/\/github.com\/CanKattwinkel\/ionic2-translate-example<\/a><\/strong><\/p>\n<p><strong>Lets get started. Setup an empty project or use an existing one:<\/strong><\/p>\n<pre class=\"lang:default decode:true\">ionic start ionic2-translate tutorial --v2 --ts\r\n<\/pre>\n<p><strong>now add angular2-translate:<\/strong><\/p>\n<pre class=\"lang:default decode:true\">cd ionic2-translate\r\nnpm install ng2-translate --save<\/pre>\n<p>In Ionic 2 your assets belong in the www\/ folder. So create your localization files in www\/assets\/i18n\/:<\/p>\n<pre class=\"lang:default decode:true\">www\/assets\/i18n\/de.json\r\nwww\/assets\/i18n\/en.json\r\nwww\/assets\/i18n\/es.json\r\n...<\/pre>\n<p>Each JSON file should look like this:<\/p>\n<pre class=\"lang:js decode:true\">\/\/ en.json:\r\n\r\n{\r\n    \"key\" : \"Translation for Key\",   \r\n    \"nested\": {    \r\n        \"user\": \"User\",\r\n        \"signIn\": \"Sign In\",\r\n        \"signUp\": \"Sign Up\"\r\n    }\r\n}\r\n\r\n\/\/ de.json:\r\n\r\n{\r\n    \"key\" : \"\u00dcbersetzung f\u00fcr Key\",   \r\n    \"nested\": {    \r\n        \"user\": \"Benutzer\",\r\n        \"signIn\": \"Einloggen\",\r\n        \"signUp\": \"Registrieren\"\r\n    }\r\n}\r\n\r\n\r\n\/\/ es.json:\r\n\r\n{\r\n    \"key\" : \"Traducci\u00f3n Key\",   \r\n    \"nested\": {    \r\n        \"user\": \"Usuario\",\r\n        \"signIn\": \"Entrar\",\r\n        \"signUp\": \"Registrarse\"\r\n    }\r\n}<\/pre>\n<p>Go to your app.ts and setup the required configuration. First of all the required imports:<\/p>\n<pre class=\"lang:default decode:true \">import {provide} from '@angular\/core';\r\nimport {Http, HTTP_PROVIDERS} from '@angular\/http';\r\nimport {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate\/ng2-translate';\r\n<\/pre>\n<p>Now add provider and pipe to ionicBootstrap method (previous of beta 8, set this <code>in @app{providers: XXX}<\/code>:<\/p>\n<pre class=\"lang:default decode:true \">ionicBootstrap(MyApp, [[provide(TranslateLoader, {\r\n  useFactory: (http: Http) =&gt; new TranslateStaticLoader(http, 'assets\/i18n', '.json'),\r\n  deps: [Http]\r\n}),\r\n  TranslateService]], {\r\n});<\/pre>\n<p>(If your path\u00a0deviates, change it in row\u00a02)<\/p>\n<p>now add the translate service to your constructor:<\/p>\n<pre class=\"lang:default decode:true\">class MyApp {\r\n  @ViewChild(Nav) nav: Nav;\r\n\r\n  \/\/ make HelloIonicPage the root (or first) page\r\n  rootPage: any = HelloIonicPage;\r\n  pages: Array&lt;{title: string, component: any}&gt;;\r\n\r\n  constructor(\r\n    private platform: Platform,\r\n    private menu: MenuController,\r\n    private  translate: TranslateService\r\n  ) {<\/pre>\n<p>in the class MyApp create a method called translateConfig and make sure all your languages are present in the regex in line 3:<\/p>\n<pre class=\"lang:default decode:true \">translateConfig() {\r\n    var userLang = navigator.language.split('-')[0]; \/\/ use navigator lang if available\r\n    userLang = \/(de|en|es)\/gi.test(userLang) ? userLang : 'en';\r\n\r\n    \/\/ this language will be used as a fallback when a translation isn't found in the current language\r\n    this.translate.setDefaultLang('en');\r\n\r\n    \/\/ the lang to use, if the lang isn't available, it will use the current loader to get them\r\n    this.translate.use(userLang);\r\n  }<\/pre>\n<p>and then call it in your constructor:<\/p>\n<pre class=\"lang:default decode:true\">constructor(\r\n    private platform: Platform,\r\n    private menu: MenuController,\r\n    private  translate: TranslateService\r\n  ) {\r\n    this.initializeApp();\r\n\r\n    \/\/ set our app's pages\r\n    this.pages = [\r\n      { title: 'Hello Ionic', component: HelloIonicPage },\r\n      { title: 'My First List', component: ListPage }\r\n    ];\r\n    this.translateConfig();\r\n  }<\/pre>\n<p>The whole app.ts:<\/p>\n<pre class=\"lang:default decode:true\">import {ViewChild, Component} from '@angular\/core';\r\nimport {ionicBootstrap, Platform, MenuController, Nav} from 'ionic-angular';\r\nimport {StatusBar} from 'ionic-native';\r\nimport {HelloIonicPage} from '.\/pages\/hello-ionic\/hello-ionic';\r\nimport {ListPage} from '.\/pages\/list\/list';\r\n\r\nimport {provide} from '@angular\/core';\r\nimport {Http, HTTP_PROVIDERS} from '@angular\/http';\r\nimport {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate\/ng2-translate';\r\n\r\n\r\n@Component({\r\n  templateUrl: 'build\/app.html',\r\n  pipes: [TranslatePipe]\r\n})\r\nclass MyApp {\r\n  @ViewChild(Nav) nav: Nav;\r\n\r\n  \/\/ make HelloIonicPage the root (or first) page\r\n  rootPage: any = HelloIonicPage;\r\n  pages: Array&lt;{title: string, component: any}&gt;;\r\n\r\n  constructor(\r\n    private platform: Platform,\r\n    private menu: MenuController,\r\n    private  translate: TranslateService\r\n  ) {\r\n    this.initializeApp();\r\n\r\n    \/\/ set our app's pages\r\n    this.pages = [\r\n      { title: 'Hello Ionic', component: HelloIonicPage },\r\n      { title: 'My First List', component: ListPage }\r\n    ];\r\n    this.translateConfig();\r\n  }\r\n\r\n  initializeApp() {\r\n    this.platform.ready().then(() =&gt; {\r\n      \/\/ Okay, so the platform is ready and our plugins are available.\r\n      \/\/ Here you can do any higher level native things you might need.\r\n      StatusBar.styleDefault();\r\n    });\r\n  }\r\n\r\n  translateConfig() {\r\n    var userLang = navigator.language.split('-')[0]; \/\/ use navigator lang if available\r\n    userLang = \/(fr|en|de)\/gi.test(userLang) ? userLang : 'en';\r\n\r\n    \/\/ this language will be used as a fallback when a translation isn't found in the current language\r\n    this.translate.setDefaultLang('en');\r\n\r\n    \/\/ the lang to use, if the lang isn't available, it will use the current loader to get them\r\n    this.translate.use(userLang);\r\n  }\r\n\r\n  openPage(page) {\r\n    \/\/ close the menu when clicking a link from the menu\r\n    this.menu.close();\r\n    \/\/ navigate to the new page if it is not the current page\r\n    this.nav.setRoot(page.component);\r\n  }\r\n}\r\nionicBootstrap(MyApp, [[provide(TranslateLoader, {\r\n  useFactory: (http: Http) =&gt; new TranslateStaticLoader(http, 'assets\/i18n', '.json'),\r\n  deps: [Http]\r\n}),\r\n  TranslateService]], {\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Thats it<\/strong>\u00a0&#8211;\u00a0ng2 translate is now ready to use. Lets add it to home view &#8211; which is hello-ionic.html in my example.<\/p>\n<p>app\/pages\/hello-ionic.html:<\/p>\n<pre class=\"lang:default decode:true \">&lt;ion-navbar *navbar&gt;\r\n  &lt;button menuToggle&gt;\r\n    &lt;ion-icon name=\"menu\"&gt;&lt;\/ion-icon&gt;\r\n  &lt;\/button&gt;\r\n  &lt;ion-title&gt;Hello Ionic&lt;\/ion-title&gt;\r\n&lt;\/ion-navbar&gt;\r\n\r\n\r\n&lt;ion-content padding class=\"getting-started\"&gt;\r\n\r\n  &lt;h3&gt;Welcome to your first Ionic app!&lt;\/h3&gt;\r\n\r\n  &lt;p&gt;\r\n    This starter project is our way of helping you get a functional app running in record time.\r\n  &lt;\/p&gt;\r\n  &lt;p&gt;\r\n    Follow along on the tutorial section of the Ionic docs!\r\n  &lt;\/p&gt;\r\n  &lt;p&gt;\r\n    &lt;button primary menuToggle&gt;Toggle Menu&lt;\/button&gt;\r\n  &lt;\/p&gt;\r\n\r\n\r\n  {{ \"key\" | translate }}&lt;br&gt;\r\n  {{ \"nested.user\" | translate }}&lt;br&gt;\r\n  {{ \"nested.signIn\" | translate }}&lt;br&gt;\r\n  {{ \"nested.signUp\" | translate }}&lt;br&gt;\r\n\r\n\r\n\r\n&lt;\/ion-content&gt;\r\n<\/pre>\n<p>The last step is to add the pipe to the component. It is required for every component with usage of ng2 translate. If you miss it Angular will throw <code>The pipe 'translate' could not be found.<\/code><\/p>\n<p>app\/pages\/hello-ionic.ts:<\/p>\n<pre class=\"lang:default decode:true \">import {TranslatePipe} from \"ng2-translate\/ng2-translate\";\r\nimport {Component} from \"@angular\/core\";\r\n\r\n\r\n@Component({\r\n    templateUrl: 'build\/pages\/hello-ionic\/hello-ionic.html',\r\n    pipes: [TranslatePipe]\r\n})\r\nexport class HelloIonicPage {\r\n  constructor() {\r\n\r\n  }\r\n}\r\n<\/pre>\n<p><strong>See the result:<\/strong><\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-861\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png\" alt=\"ionic2-translate\" width=\"656\" height=\"396\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/06\/ionic2-translate.png 656w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2016\/06\/ionic2-translate-300x181.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setting up Ionic 2 with angular2-translate is pretty simple. But since there were a lot of changes in the recent time and most of the code examples provided in other blogs is already outdated i decided to describe the latest working approach. Currently i&#8217;m using angular2rc.1. Since Anuglar has reached RC status there should be [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/\"> 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":[1],"tags":[],"class_list":["post-860","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ionic2 &amp; Angular2 Translate - Internationalize and Localize Your App - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore 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\/ionic2-angular2-translate-internationalize-localize-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic2 &amp; Angular2 Translate - Internationalize and Localize Your App - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-06T08:25:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T19:18:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Ionic2 &#038; Angular2 Translate &#8211; Internationalize and Localize Your App\",\"datePublished\":\"2016-06-06T08:25:33+00:00\",\"dateModified\":\"2023-12-20T19:18:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/\"},\"wordCount\":322,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/ionic2-translate.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/\",\"name\":\"Ionic2 & Angular2 Translate - Internationalize and Localize Your App - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/ionic2-translate.png\",\"datePublished\":\"2016-06-06T08:25:33+00:00\",\"dateModified\":\"2023-12-20T19:18:08+00:00\",\"description\":\"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/ionic2-translate.png\",\"contentUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/ionic2-translate.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/ionic2-angular2-translate-internationalize-localize-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic2 &#038; Angular2 Translate &#8211; Internationalize and Localize Your App\"}]},{\"@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":"Ionic2 & Angular2 Translate - Internationalize and Localize Your App - Web Development Blog","description":"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore 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\/ionic2-angular2-translate-internationalize-localize-app\/","og_locale":"en_US","og_type":"article","og_title":"Ionic2 & Angular2 Translate - Internationalize and Localize Your App - Web Development Blog","og_description":"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2016-06-06T08:25:33+00:00","article_modified_time":"2023-12-20T19:18:08+00:00","og_image":[{"url":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png","type":"","width":"","height":""}],"author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Ionic2 &#038; Angular2 Translate &#8211; Internationalize and Localize Your App","datePublished":"2016-06-06T08:25:33+00:00","dateModified":"2023-12-20T19:18:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/"},"wordCount":322,"commentCount":18,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/","url":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/","name":"Ionic2 & Angular2 Translate - Internationalize and Localize Your App - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png","datePublished":"2016-06-06T08:25:33+00:00","dateModified":"2023-12-20T19:18:08+00:00","description":"Elevate your app globally! Internationalize and localize with Ionic 2 and Angular 2 Translate effortlessly. Enhance user experience\u2014explore now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#primaryimage","url":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png","contentUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2016\/06\/ionic2-translate.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/ionic2-angular2-translate-internationalize-localize-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic2 &#038; Angular2 Translate &#8211; Internationalize and Localize Your App"}]},{"@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\/860","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=860"}],"version-history":[{"count":9,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/860\/revisions"}],"predecessor-version":[{"id":2191,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/860\/revisions\/2191"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}