├── .editorconfig
├── .gitignore
├── README.md
├── ionic.config.json
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app.component.ts
│ ├── app.html
│ ├── app.module.ts
│ ├── app.scss
│ └── main.ts
├── assets
│ ├── i18n
│ │ ├── de.json
│ │ └── en.json
│ ├── icon
│ │ └── favicon.ico
│ └── imgs
│ │ └── logo.png
├── index.html
├── manifest.json
├── pages
│ └── home
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.ts
├── service-worker.js
└── theme
│ └── variables.scss
├── tsconfig.json
└── tslint.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
2 | # editorconfig.org
3 |
4 | root = true
5 |
6 | [*]
7 | indent_style = space
8 | indent_size = 2
9 |
10 | # We recommend you to keep these unchanged
11 | end_of_line = lf
12 | charset = utf-8
13 | trim_trailing_whitespace = true
14 | insert_final_newline = true
15 |
16 | [*.md]
17 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Specifies intentionally untracked files to ignore when using Git
2 | # http://git-scm.com/docs/gitignore
3 |
4 | *~
5 | *.sw[mnpcod]
6 | *.log
7 | *.tmp
8 | *.tmp.*
9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 |
15 | .idea/
16 | .sourcemaps/
17 | .sass-cache/
18 | .tmp/
19 | .versions/
20 | coverage/
21 | dist/
22 | node_modules/
23 | tmp/
24 | temp/
25 | hooks/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | www/
31 | $RECYCLE.BIN/
32 |
33 | .DS_Store
34 | Thumbs.db
35 | UserInterfaceState.xcuserstate
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ionic 3 + Angular 5 + ngx-translate 9
2 |
3 | Simple demo project showing how to add translations to your ionic + angular app.
4 |
5 | **Ionic 3 currently works with Angular v5. This means that you also have to use ngx-translate 9.x**
6 |
--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ionic3-angular5",
3 | "app_id": "",
4 | "type": "ionic-angular",
5 | "integrations": {}
6 | }
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ionic3-angular5",
3 | "version": "0.0.1",
4 | "author": "Ionic Framework",
5 | "homepage": "http://ionicframework.com/",
6 | "private": true,
7 | "scripts": {
8 | "clean": "ionic-app-scripts clean",
9 | "build": "ionic-app-scripts build",
10 | "lint": "ionic-app-scripts lint",
11 | "ionic:build": "ionic-app-scripts build",
12 | "ionic:serve": "ionic-app-scripts serve"
13 | },
14 | "dependencies": {
15 | "@angular/animations": "5.2.9",
16 | "@angular/common": "5.2.9",
17 | "@angular/compiler": "5.2.9",
18 | "@angular/compiler-cli": "5.2.9",
19 | "@angular/core": "5.2.9",
20 | "@angular/forms": "5.2.9",
21 | "@angular/http": "5.2.9",
22 | "@angular/platform-browser": "5.2.9",
23 | "@angular/platform-browser-dynamic": "5.2.9",
24 | "@ionic-native/core": "4.6.0",
25 | "@ionic-native/splash-screen": "4.6.0",
26 | "@ionic-native/status-bar": "4.6.0",
27 | "@ionic/storage": "2.1.3",
28 | "@ngx-translate/core": "^9.1.1",
29 | "@ngx-translate/http-loader": "^3.0.1",
30 | "ionic-angular": "3.9.2",
31 | "ionicons": "3.0.0",
32 | "rxjs": "5.5.8",
33 | "sw-toolbox": "3.6.0",
34 | "zone.js": "0.8.20"
35 | },
36 | "devDependencies": {
37 | "@ionic/app-scripts": "3.1.8",
38 | "typescript": "~2.6.2"
39 | },
40 | "description": "An Ionic project"
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Platform } from 'ionic-angular';
3 | import { StatusBar } from '@ionic-native/status-bar';
4 | import { SplashScreen } from '@ionic-native/splash-screen';
5 | import { TranslateService } from '@ngx-translate/core';
6 |
7 | import { HomePage } from '../pages/home/home';
8 | @Component({
9 | templateUrl: 'app.html'
10 | })
11 | export class MyApp {
12 | rootPage: any = HomePage;
13 |
14 | constructor(private translate: TranslateService, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
15 | platform.ready().then(() => {
16 | // Okay, so the platform is ready and our plugins are available.
17 | // Here you can do any higher level native things you might need.
18 | statusBar.styleDefault();
19 | splashScreen.hide();
20 | });
21 | this.initTranslate();
22 | }
23 |
24 | initTranslate() {
25 | // Set the default language for translation strings, and the current language.
26 | this.translate.setDefaultLang('en');
27 |
28 |
29 | if (this.translate.getBrowserLang() !== undefined) {
30 | this.translate.use(this.translate.getBrowserLang());
31 | } else {
32 | this.translate.use('en'); // Set your language here
33 | }
34 |
35 | }
36 | }
37 |
38 |
--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { ErrorHandler, NgModule } from '@angular/core';
3 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
4 | import { SplashScreen } from '@ionic-native/splash-screen';
5 | import { StatusBar } from '@ionic-native/status-bar';
6 |
7 | import { MyApp } from './app.component';
8 | import { HomePage } from '../pages/home/home';
9 | import {HttpClient, HttpClientModule} from "@angular/common/http";
10 | import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
11 | import {TranslateHttpLoader} from "@ngx-translate/http-loader";
12 |
13 | @NgModule({
14 | declarations: [
15 | MyApp,
16 | HomePage
17 | ],
18 | imports: [
19 | BrowserModule,
20 | HttpClientModule,
21 | TranslateModule.forRoot({
22 | loader: {
23 | provide: TranslateLoader,
24 | useFactory: (HttpLoaderFactory),
25 | deps: [HttpClient]
26 | }
27 | }),
28 | IonicModule.forRoot(MyApp)
29 | ],
30 | bootstrap: [IonicApp],
31 | entryComponents: [
32 | MyApp,
33 | HomePage
34 | ],
35 | providers: [
36 | StatusBar,
37 | SplashScreen,
38 | {provide: ErrorHandler, useClass: IonicErrorHandler}
39 | ]
40 | })
41 | export class AppModule {}
42 |
43 |
44 | export function HttpLoaderFactory(http: HttpClient) {
45 | return new TranslateHttpLoader(http, './assets/i18n/', '.json');
46 | }
--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/theming/
2 |
3 |
4 | // App Global Sass
5 | // --------------------------------------------------
6 | // Put style rules here that you want to apply globally. These
7 | // styles are for the entire app and not just one component.
8 | // Additionally, this file can be also used as an entry point
9 | // to import other Sass files to be included in the output CSS.
10 | //
11 | // Shared Sass variables, which can be used to adjust Ionic's
12 | // default Sass variables, belong in "theme/variables.scss".
13 | //
14 | // To declare rules for a specific mode, create a child rule
15 | // for the .md, .ios, or .wp mode classes. The mode class is
16 | // automatically applied to the
element in the app.
17 |
--------------------------------------------------------------------------------
/src/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import { AppModule } from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/src/assets/i18n/de.json:
--------------------------------------------------------------------------------
1 | {
2 | "demo": {
3 | "title": "Übersetzungs-Demo",
4 | "german": "Deutsch",
5 | "english": "Englisch"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/assets/i18n/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "demo": {
3 | "title": "Translation Demo",
4 | "german": "German",
5 | "english": "English"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/assets/icon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngx-translate/ionic-example/f455565f5bc17a06d46abf6aab002583ecc9a7a2/src/assets/icon/favicon.ico
--------------------------------------------------------------------------------
/src/assets/imgs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngx-translate/ionic-example/f455565f5bc17a06d46abf6aab002583ecc9a7a2/src/assets/imgs/logo.png
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ionic App
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ionic",
3 | "short_name": "Ionic",
4 | "start_url": "index.html",
5 | "display": "standalone",
6 | "icons": [{
7 | "src": "assets/imgs/logo.png",
8 | "sizes": "512x512",
9 | "type": "image/png"
10 | }],
11 | "background_color": "#4e8ef7",
12 | "theme_color": "#4e8ef7"
13 | }
--------------------------------------------------------------------------------
/src/pages/home/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ionic Blank
5 |
6 |
7 |
8 |
9 |
10 | demo.title
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/home/home.scss:
--------------------------------------------------------------------------------
1 | page-home {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/home/home.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NavController } from 'ionic-angular';
3 | import {TranslateService} from "@ngx-translate/core";
4 |
5 | @Component({
6 | selector: 'page-home',
7 | templateUrl: 'home.html'
8 | })
9 | export class HomePage {
10 |
11 | constructor(private translate: TranslateService, public navCtrl: NavController) {
12 |
13 | }
14 |
15 | public changeLanguage(language)
16 | {
17 | this.translate.use(language);
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check out https://googlechromelabs.github.io/sw-toolbox/ for
3 | * more info on how to use sw-toolbox to custom configure your service worker.
4 | */
5 |
6 |
7 | 'use strict';
8 | importScripts('./build/sw-toolbox.js');
9 |
10 | self.toolbox.options.cache = {
11 | name: 'ionic-cache'
12 | };
13 |
14 | // pre-cache our key assets
15 | self.toolbox.precache(
16 | [
17 | './build/main.js',
18 | './build/vendor.js',
19 | './build/main.css',
20 | './build/polyfills.js',
21 | 'index.html',
22 | 'manifest.json'
23 | ]
24 | );
25 |
26 | // dynamically cache any other local assets
27 | self.toolbox.router.any('/*', self.toolbox.fastest);
28 |
29 | // for any other requests go to the network, cache,
30 | // and then only use that cached resource if your user goes offline
31 | self.toolbox.router.default = self.toolbox.networkFirst;
32 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/theming/
3 |
4 | // Font path is used to include ionicons,
5 | // roboto, and noto sans fonts
6 | $font-path: "../assets/fonts";
7 |
8 |
9 | // The app direction is used to include
10 | // rtl styles in your app. For more info, please see:
11 | // http://ionicframework.com/docs/theming/rtl-support/
12 | $app-direction: ltr;
13 |
14 |
15 | @import "ionic.globals";
16 |
17 |
18 | // Shared Variables
19 | // --------------------------------------------------
20 | // To customize the look and feel of this app, you can override
21 | // the Sass variables found in Ionic's source scss files.
22 | // To view all the possible Ionic variables, see:
23 | // http://ionicframework.com/docs/theming/overriding-ionic-variables/
24 |
25 |
26 |
27 |
28 | // Named Color Variables
29 | // --------------------------------------------------
30 | // Named colors makes it easy to reuse colors on various components.
31 | // It's highly recommended to change the default colors
32 | // to match your app's branding. Ionic uses a Sass map of
33 | // colors so you can add, rename and remove colors as needed.
34 | // The "primary" color is the only required color in the map.
35 |
36 | $colors: (
37 | primary: #488aff,
38 | secondary: #32db64,
39 | danger: #f53d3d,
40 | light: #f4f4f4,
41 | dark: #222
42 | );
43 |
44 |
45 | // App iOS Variables
46 | // --------------------------------------------------
47 | // iOS only Sass variables can go here
48 |
49 |
50 |
51 |
52 | // App Material Design Variables
53 | // --------------------------------------------------
54 | // Material Design only Sass variables can go here
55 |
56 |
57 |
58 |
59 | // App Windows Variables
60 | // --------------------------------------------------
61 | // Windows only Sass variables can go here
62 |
63 |
64 |
65 |
66 | // App Theme
67 | // --------------------------------------------------
68 | // Ionic apps can have different themes applied, which can
69 | // then be future customized. This import comes last
70 | // so that the above variables are used and Ionic's
71 | // default are overridden.
72 |
73 | @import "ionic.theme.default";
74 |
75 |
76 | // Ionicons
77 | // --------------------------------------------------
78 | // The premium icon font for Ionic. For more info, please see:
79 | // http://ionicframework.com/docs/ionicons/
80 |
81 | @import "ionic.ionicons";
82 |
83 |
84 | // Fonts
85 | // --------------------------------------------------
86 |
87 | @import "roboto";
88 | @import "noto-sans";
89 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "dom",
9 | "es2015"
10 | ],
11 | "module": "es2015",
12 | "moduleResolution": "node",
13 | "sourceMap": true,
14 | "target": "es5"
15 | },
16 | "include": [
17 | "src/**/*.ts"
18 | ],
19 | "exclude": [
20 | "node_modules",
21 | "src/**/*.spec.ts",
22 | "src/**/__tests__/*.ts"
23 | ],
24 | "compileOnSave": false,
25 | "atom": {
26 | "rewriteTsconfig": false
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "no-duplicate-variable": true,
4 | "no-unused-variable": [
5 | true
6 | ]
7 | },
8 | "rulesDirectory": [
9 | "node_modules/tslint-eslint-rules/dist/rules"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------