Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at CodePush.sync (vendor.js:84065)
at MyApp.webpackJsonp.406.MyApp.checkCodePush
I get the above error in my code. My code is as follows.
import { CodePush, InstallMode, SyncStatus } from '#ionic-native/code-push/ngx';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private codePush: CodePush) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
this.codePush.sync();
});
});
Related
I am developing an application to read codes that I am using the BarcodeScanner but when I execute the application on my device I get the following error
**
**Error running it on my iphone 6 using ionic DevApp Error Runtime Error Object(_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"])is not a function. (In 'Object(_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"])(this, "scan", {"callbackOrder":"reverse"}, arguments)', 'Object(_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"])'is an instance of Object)
Error that is displayed when executing it in ionic serve, ERROR TypeError: Object(...) is not a function at BarcodeScanner.scan (index.js:31) at MenuPage.webpackJsonp.101.MenuPage.scanQR (menu.ts:53) at Object.eval [as handleEvent] (MenuPage.html:17) at handleEvent (core.js:13589) at callWithDebugContext (core.js:15098) at Object.debugHandleEvent [as handleEvent] (core.js:14685) at dispatchEvent (core.js:10004) at core.js:10629 at HTMLButtonElement. (platform-browser.js:2628) at t.invokeTask (polyfills.js:3) **
at the beginning I had the error that my app-module.ts did not
recognize me the BarcodeScanner because when calling it in providers
me, TS2322: Type 'BarcodeScannerOriginal' is not assignable to type
'Provider'. Type 'BarcodeScannerOriginal' is not assignable to type
'FactoryProvider'. Property 'provide' is missing in type
'BarcodeScannerOriginal'
**
Menu.html
<ion-header class="toolbar">
<ion-navbar>
<ion-title>Scan</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="Scan">
<div class="row">
<div class="col">
<h2>Scan your QR Code Here</h2>
</div>
<div class="col">
<h3>{{eventTitle}}</h3>
</div>
</div>
<button ion-button block color="secondary" class="Scan-button" (click)="scanQR()" [disabled]="loading">{{buttonText}}</button>
</ion-content>
Menu.ts
import { Component } from '#angular/core';
import {Platform} from "ionic-angular";
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { ToastController } from 'ionic-angular';
import { BarcodeScanner, BarcodeScannerOptions } from '#ionic-native/barcode-scanner/ngx';
/**
* Generated class for the MenuPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-menu',
templateUrl: 'menu.html',
})
export class MenuPage {
public scannedText: string;
public buttonText: string;
public loading: boolean;
private eventId: number;
public eventTitle: string;
num: string;
// #ts-ignore
constructor(private _nav: NavController,
private _navParams: NavParams,
private _barcodeScanner: BarcodeScanner) {
}
ionViewDidLoad() {
this.eventId = this._navParams.get('eventId');
this.eventTitle = this._navParams.get('eventTitle');
this.buttonText = "Scan";
this.loading = false;
}
public scanQR() {
this.buttonText = "Loading..";
this.loading = true;
this._barcodeScanner.scan().then((barcodeData) => {
if (barcodeData.cancelled) {
console.log("User cancelled the action!");
this.buttonText = "Scan";
this.loading = false;
return false;
}
console.log("Scanned successfully!");
console.log(barcodeData);
this.goToResult(barcodeData);
}, (err) => {
console.log(err);
});
}
private goToResult(barcodeData) {
this._nav.push(ScanResultPage, {
scannedText: barcodeData.text
});
}
}
app-module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {MenuPage} from "../pages/menu/menu";
import { BarcodeScanner } from '#ionic-native/barcode-scanner/ngx';
import { HttpClientModule } from '#angular/common/http';
import { FormsModule } from '#angular/forms';
import {HttpModule} from "#angular/http";
// #ts-ignore
#NgModule({
declarations: [
MyApp,
HomePage,
MenuPage
],
imports: [
BrowserModule, HttpClientModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
MenuPage
],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
enter image description here
My guess is you are on Ionic 3 but you are using the native plugin version supported for Ionic 4.
Solution
Uninstall both cordova and ionic native plugin
$ionic cordova plugin remove phonegap-plugin-barcodescanner
$npm uninstall #ionic-native/barcode-scanner
Install version 4.
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save #ionic-native/barcode-scanner#4
And don't append ngx at the end of the import.
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
Note
If you are using Ionic 3, try following the Ionic v3 guide instead of the latest guide
Ionic v3 guide:https://ionicframework.com/docs/v3/native/barcode-scanner/
For complete explanation you can find my other answer here: https://stackoverflow.com/a/54474247/6617276
I am migrating Storage to SecureStorage. The normal storage worked fine, but I have problems with secure storage on all platforms.
I installed the plugin like here described. But if I run the app in the browser or on Android, I get following errors:
plugin_not_installed
(...)
ERROR Error: "Uncaught (in promise): TypeError: this.storage is undefined
[42]/DataProvider.prototype.getLoginData
I imported SecureStorage as Provider into app.module.ts.
app.component.ts looks like this:
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private dataProvider: DataProvider, private restProvider: RestProvider) {
this.initializeApp();
// ...
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.dataProvider.getLoginData().then((loginData) => {
console.log(loginData);
}, (error) => {
console.error(error);
});
}
And DataProvider looks like this:
import {Injectable} from '#angular/core';
import {SecureStorage, SecureStorageObject} from '#ionic-native/secure-storage';
/**
* #see https://ionicframework.com/docs/native/secure-storage/
* #see https://github.com/Crypho/cordova-plugin-secure-storage
*/
#Injectable()
export class DataProvider {
storage: SecureStorageObject;
constructor(private secureStorage: SecureStorage) {
this.secureStorage.create('com.mydomain.myapp').then((storage: SecureStorageObject) => {
DevProvider.logDebugMsg('secureStorage created');
this.storage = storage;
}, (error) => {
console.error('creating secureStorage failed: ', error); // output is: plugin_not_installed
});
}
getLoginData() {
return this.storage.get('loginData');
}
}
What's wrong here?
Thanks.
I'm getting the error NullInjectorError: No provider for NavController. I searched for it and I know I shouldn't inject it into the appcomponent. I'm not doing so, but I still get the error. I have appComponent which is my rootcomponent. As startpage i'm setting my StartPage. In this StartPage i'm injecting the What am I doing wrong?
AppComponent template:
<ion-nav #content [root]="rootPage"></ion-nav>
AppComponent:
export class AppComponent {
rootPage: any = StartPage; //Setting my start page
constructor(
private platform: Platform,
private statusBar: StatusBar,
private splashScreen: SplashScreen) {
}
ionViewDidLoad() {
this.platform.ready().then(() => {
this.statusBar.styleBlackTranslucent();
this.splashScreen.hide();
});
}
}
StartPage:
export class StartPage {
constructor(private navController: NavController){
}
signin(){
this.navController.push(LoginPage);
}
signup(){
this.navController.push(SignupPage);
}
}
Try to import NavCtrl at the top of the file, where you need it (at the top of the StartPage?):
import { NavController } from 'ionic-angular';
And adding it into constructor, as you did, should be enough.
On my Ionic app the ngx-translate is giving me this message on console:
.... assets/i18n/.json 404 (Not Found)
With another details on HttpErrorResponse
So my app on BROWSER keeps giving this error, and when I build to use on phone it just trigger an alert message with this error and closes the app
My Setup:
Android.
"cordova-plugin-crosswalk-webview": "^2.4.0" <- LITE
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^2.0.1",
Ionic 3
Here's my app.module.ts
import { HttpClientModule, HttpClient } from '#angular/common/http';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
I saw other users having issues with the
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
Changing it to just Http instead of HttpClient, but was no use for me. Typescript tells me the http has to be HttpClient type.
This is my app.component.ts
import { TranslateService } from '#ngx-translate/core';
.
.
.
constructor(
private translateService: TranslateService,
public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
// this.setAppTranslation();
this.translateService.addLangs(["en", "pt"]);
this.translateService.setDefaultLang('en');
this.translateService.use('en');
});
}
I've follow this tutorial to apply the function to my app:
https://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/
Can anyone help me at least understand?
My assets/i18n folder has 2 files:
en.json
pt.json
I've had that problem before, try these two things:
Change your loader to this (as #Mohsen said):
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
And your useFactory to this:
useFactory: (HttpLoaderFactory)
IMPORTANT: Make sure your assets folder is at this level:
/ src / assets /
SEARCH
key: "loadUrl",
value: function(t, e) {
var n = this;
THEN ADD,
if (t !== undefined)
t = t.replace("../../../app-assets/", "../../../control/app-assets/");
What I am trying to do is when the splash screen is loading, a http request is made to the server to pull some information and pass the response to another page.
Below is the code I am working with.
import { Component } from '#angular/core';
import { Platform, LoadingController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { CacheService } from "ionic-cache/ionic-cache";
import { Apis } from './apis';
import { StayPage} from '../pages/stay/stay';
#Component({
templateUrl: 'app.html',
providers: [Apis]
})
export class MyApp {
rootPage = StayPage;
constructor(platform: Platform, cache: CacheService, public loadingCtrl: LoadingController, public Apis: Apis ) {
cache.setDefaultTTL(60 * 60);
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.Apis.types().subscribe( response => {
response.results;
StatusBar.styleDefault();
Splashscreen.hide();
}, err => {
this.Apis.error( err );
});
});
}
}
When I run the above code, the splash screen is stuck on loading and doesn't move to another page.
You need to make HTTP request in constructor or ngOnInit of StayPage.
export class StayPage implements OnInit {
...
constructor(public navCtrl: NavController,
public navParams: NavParams
public http: Http) { }
ngOnInit(){
this.http.get(apiUrl)
.subscribe(
responseSuccess => ...
responseError => ...
}
}
}