Hi,
Do you mean this only add during import?
import {TranslateService, TranslateLoader, TranslateStaticLoader} from ‘ng2-translate/ng2-translate’;
Appreciate if you can explain more detail.
ooops, the line got erased!
Yes, add TRANSLATE_PROVIDERS in your import like explained above by @ocombe
No. Still same error.
please add
import {HTTP_PROVIDERS, Http} from ‘angular2/http’;
there is a reference in the “useFactory”, so probably you don’t have that in your import list, right?
Initially I added that, but this error happen. So i remove it and follow exactly like release document suggested, but I still facing same error.
I just added that line of code as you suggested, but still have the same error.
This is weird.
Which version do you have. I have 1.10.2. Not sure if it is related to your issue though.
Maybe @ocombe will have some other ideas
Anyway, when I install ng2-translate I have the warn message below. I am not is it common, or actually I have the installation issue.
npm install ng2-translate --save
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.9
npm WARN myapp@ No repository field.
npm WARN myapp@ No license field.try to do
npm uninstall ng2-translate
then run
npm install
I know I had some issue with that package and other ones and after an uninstall, it solves my problem!
Also, here is my package.json. Maybe you can compare and see if we are running almost the same thing
“dependencies”: {
“angular2”: “2.0.0-beta.8”,
“chart.js”: “1.0.2”,
“es6-promise”: “3.0.2”,
“es6-shim”: “0.33.13”,
“ionic-angular”: “2.0.0-beta.3”,
“ionic-native”: “^1.1.0”,
“ionicons”: “3.0.0-alpha.3”,
“ng2-charts”: “^1.0.0-beta.0”,
“ng2-translate”: “1.10.2”,
“reflect-metadata”: “0.1.2”,
“rxjs”: “5.0.0-beta.2”,
“zone.js”: “0.5.15”
},
“devDependencies”: {
“awesome-typescript-loader”: “0.15.10”,
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-autoprefixer”: “^3.1.0”,
“gulp-sass”: “2.2.0”,
“gulp-watch”: “4.3.5”,
“strip-sourcemap-loader”: “0.0.1”,
“typescript”: “1.8.9”,
“webpack”: “1.12.14”
},
I follow the step which you provided. The warning message still appear.
npm uninstall ng2-translate
- ng2-translate@1.10.3 node_modules\ng2-translate
npm WARN myapp@ No repository field.
npm WARN myapp@ No license field.
npm install ng2-translate --save
myapp@ C:\Projects\apps\myapp
`-- ng2-translate@1.10.3
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.9
npm WARN myapp@ No repository field.
npm WARN myapp@ No license field.
Below is my package.json, I found my angular2 is 1 version behind yours, but ng2-translate is 1 version ahead yours.
“dependencies”: {
“angular2”: “2.0.0-beta.6”,
“es6-promise”: “3.0.2”,
“es6-shim”: “0.33.13”,
“ionic-angular”: “2.0.0-beta.3”,
“ionic-native”: “^1.1.0”,
“ionicons”: “3.0.0-alpha.3”,
“ng2-translate”: “^1.10.3”,
“reflect-metadata”: “0.1.2”,
“rxjs”: “5.0.0-beta.0”,
“zone.js”: “0.5.14”
},
“devDependencies”: {
“babel-core”: “6.5.2”,
“babel-loader”: “6.2.3”,
“babel-plugin-transform-decorators-legacy”: “1.3.4”,
“babel-preset-es2015”: “6.5.0”,
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-webpack-build”: “^1.0.0”,
“strip-sourcemap-loader”: “0.0.1”
},
I just copied and pasted you @App to my code and it compiled correctly!
I don’t have any other idea to try for now
Do you think is it possible because I am using latest ng2-transkate version. 1.10.3
When you told me that you were using a newer version, I did it also and it is still working
I try to create a new project for testing, but still facing the same error. I am wondering which I step am I missing.
Appreciate if anybody able to provide me some advise.
1. ionic start testapps sidemenu --v2
2. ionic add platform android
3. ionic add platform ios
4. npm install ng2-translate --save
5. add the code below to app.js
import {provide} from 'angular2/core';
import {Http} from 'angular2/http';
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
@App({
templateUrl: 'build/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
providers: [
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
TranslateService
]
})
package.json
“dependencies”: {
“angular2”: “2.0.0-beta.6”,
“es6-promise”: “3.0.2”,
“es6-shim”: “0.33.13”,
“ionic-angular”: “2.0.0-beta.3”,
“ionic-native”: “^1.1.0”,
“ionicons”: “3.0.0-alpha.3”,
“ng2-translate”: “^1.10.3”,
“reflect-metadata”: “0.1.2”,
“rxjs”: “5.0.0-beta.0”,
“zone.js”: “0.5.14”
},
“devDependencies”: {
“babel-plugin-transform-decorators-legacy”: “1.3.4”,
“babel-preset-es2015”: “6.6.0”,
“babelify”: “7.2.0”,
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-browserify-es2015”: “^1.0.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^1.0.0”
},
6. ionic serve --c
Hi @shmu80,
What is the use of “–c” when executing “ionic serve”?
I tried that and got looooots of errors (ex: TypeError: Object doesn’t support property or method ‘openDatabase’), but the application got executed in Chrome.
–c is use to display console log.
I modify the code as below, and it has no issue for the code below, but another issue appear.
@App({
templateUrl: 'build/app.html',
config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
providers: [
provide(TranslateLoader, {
useFactory: (http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [[Http]]
}),
TranslateService
],
pipes: [TranslatePipe]
})
This time it trigger me another error. I am wondering the problem is because it couldn’t find the en.json (located at www/assets/i18n folder) or some other issue.
EXCEPTION: TypeError: Unable to get property 'title' of undefined or null reference in [ {{ "title" | translate }} in AccessPage@7:13
Below is my access page code
<ion-navbar *navbar> <ion-title> {{ "title" | translate }} </ion-title> </ion-navbar>
and my code in en.json.
{
“title” : “Testing”,
}
In my app.ts, I have a function translationConfig and initinalize the ng-translate. I am calling that function from the constructor. Do you same similar code somewhere (can be in the constructor directly too)
translationConfig() {
let userLang = navigator.language.split('-')[0]; // use navigator lang if available
userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
// optional, default is "en"
this._translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
this._translate.use(userLang);
}Do you know what is the purpose for your translationConfig() method?
My understanding is that is purposely to set the default language, and I have this code set into my apps.js
this._translate.setDefaultLang('en');
So I am just wondering will it still relate to my issue?
Do you know how can I verify whether it able to read the en.json?
My issue fixed after I update my angular2 version to beta 12