Develop Reference

Ionic 4 fails to load on mobile once i add Google Firebase to the project

My ionic 4 project works great on chrome, devapp and even after compiling to apk.
But once I add firebase config it fails to load using both devapp or even after compiling to apk.
here is how I add firebase:
first of all, I install it using npm install #angular/fire firebase --save
My environments.ts it looks like:
export const environment = {
production: false,
firebase: {
apiKey: 'xxxxxxxxxxxxxxx',
authDomain: 'xxxxxxxxxxxx.firebaseapp.com',
databaseURL: 'https://xxxxxxxxxxxxxx.firebaseio.com',
projectId: 'xxxxxxxxxxxxxxx',
storageBucket: 'xxxxxxxxxxxxxx.appspot.com',
messagingSenderId: 'xxxxxxxxxxxxxxx'
}
};
then I add these lines with trailing <<<< to my app.module.ts :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment'; <<<<
import { AngularFireModule } from '#angular/fire'; <<<<<
import { AngularFirestoreModule } from '#angular/fire/firestore'; <<<<
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase), <<<<
AngularFirestoreModule <<<<
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
once I finish this, the app is no longer working on mobile ( white death screen)
And that is what I get when I use the chrome remote dev. tools:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Ng2-translate and webpack

Good afternoon guys, I'm using ng2-translate to do the translation of the app and run perfectly with the command: tns run ios | Android
        But I'm having an error while running with webpack with the following parameters: tns run ios --bundle --env.uglify --env.aot
Error:
CONSOLE LOG file:///app/vendor.js:1:1200993:
CONSOLE ERROR file:///app/vendor.js:1:28276: ERROR TypeError: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: ERROR BOOTSTRAPPING ANGULAR
CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
getTranslation#file:///app/vendor.js:1:886381
getTranslation#file:///app/vendor.js:1:887491
retrieveTranslations#file:///app/vendor.js:1:887380
setDefaultLang#file:///app/vendor.js:1:886824
n#file:///app/bundle.js:1:88782
ka#file:///app/vendor.js:1:110925
Repository to test: https://github.com/gustavost26/teste-ng2-translate

Good that you provided a example project, I was able to quickly review it and looks like you are using latest version of Angular and rxjs but your translate module is completely outdated.
Replace it with the refactored latest version of same package
npm install --save #ngx-translate/core #ngx-translate/http-loader
Updated app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader } from "#ngx-translate/core";
import { TranslateHttpLoader } from "#ngx-translate/http-loader";
import { ItemService } from "./pages/item/item.service";
import { ItemsComponent } from "./pages/item/items.component";
import { ItemDetailComponent } from "./pages/item/item-detail.component";
import { HttpClient } from "#angular/common/http";
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptFormsModule,
NativeScriptHttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
Updated app.component.ts
import { Component } from "#angular/core";
import { TranslateService } from '#ngx-translate/core';
import * as Platform from "platform";
#Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private translate: TranslateService) {
this.translate.setDefaultLang('en'); //chage pt
//this.translate.use(Platform.device.language.split('-')[0]);
}
}

unable to make .apk using ionic codova

I am very new in ionic framework.I want a side menu using ionic 3 framework.I make already that app.It run in ionic lab but when I build for android as apk an error comes.
typescript error
Type QrPage in /Users/arpan/Desktop/rad/src/pages/qr/qr.ts is part of the declarations of 2 modules:
AppModule in /Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts! Please consider moving QrPage in
/Users/arpan/Desktop/rad/src/pages/qr/qr.ts to a higher module that imports AppModule in
/Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts. You can also create a new NgModule that exports and
includes QrPage in /Users/arpan/Desktop/rad/src/pages/qr/qr.ts then import that NgModule in AppModule in
/Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts.
this the error
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { QrPage } from '../pages/qr/qr';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
QrPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
NgxQRCodeModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
QrPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BarcodeScanner
]
})
export class AppModule {}
qr.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { QrPage } from './qr';
#NgModule({
declarations: [
QrPage,
],
imports: [
IonicPageModule.forChild(QrPage),
],
exports: [
QrPage,
]
})
export class QrPageModule {}
This is a side menu ionic app.and i add a page their have a qr code generator.i use ngx-qrcode2.
please help me how i do that?

this is an common error caused by the Lazy Load feature of ionic.
You need to import the QrPageModule in the App.Module IMPORTS and remove the QrPage in declarations and entryComponents.
Try that and see if it works!

Ionic InAppBrowser. Not always working

I currently have an Ionic app that creates an InAppBrowser pointing to a Website. I have deployed it to my Android phone, however there is a big issue.
Sometimes the app doesn’t work and opens the website with my default browser. Sometimes it does work and opens the website in the app using InAppBrowser.
I have tried using the different targets self, blank, system and different Android phones, but nothing fully works.
I am really confused and tried a number of things, any ideas?
Thanks in advance.
Below are my code files:
home.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
InAppBrowser
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
InAppBrowser Not Displayed.
</ion-content>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from "#ionic-native/in-app-browser";
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser) {
const options: InAppBrowserOptions = {
toolbar: 'no',
location: 'no',
zoom: 'no'
}
const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
}
}
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 { InAppBrowser } from '#ionic-native/in-app-browser';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
InAppBrowser
]
})
export class AppModule {}

Did you try to wait the "platform" to be "ready" to use?
https://ionicframework.com/docs/api/platform/Platform/
export class HomePage {
constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser, public platform: Platform) {
const options: InAppBrowserOptions = {
toolbar: 'no',
location: 'no',
zoom: 'no'
}
this.platform.ready().then( () => {
const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
})
}
}
Doing this, the code will only run when the app is ready. In the device environment, when Cordova is ready to be used.

Ionic Android Issue: scan function not working

I am new to angularjs and ionic cordova. I am following the code given in this video lecture on ionic cordova BLE plugin module. I am trying to make this work using ionic 3 and have installed ionic cordova plugin for BLE.
https://www.youtube.com/watch?v=chfXawb_eVY&t=1898s
I have followed the exact instruction. Here's are my code files:
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 { BLE } from '#ionic-native/ble';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BLE
]
}) export class AppModule {}
home.ts
import { Component, NgZone } from '#angular/core';
import { NavController } from 'ionic-angular';
import { BLE } from '#ionic-native/ble';
import { ToastController } from 'ionic-angular';
import { setTimeout } from 'core-js/library/web/timers';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
devices: any[] = [];
statusMessage:string;
constructor(public navCtrl: NavController,
public toastCtrl: ToastController,
private ble: BLE,
private ngZone: NgZone) {
}
scan(){
this.setStatus('Scanning for bluetooth LE devices');
this.devices = [];
this.ble.scan([], 2).subscribe(
device=>this.onDeviceDiscovered(device),
error=>this.scanError(error)
);
setTimeout(this.statusMessage.bind(this),5000,'Scan Complete');
}
onDeviceDiscovered(device){
console.log('Scanning');
console.log('Discovered ' + JSON.stringify(device,null,2));
this.ngZone.run(()=>{
this.devices.push(device);
});
}
scanError(error) {
console.log('Check your bluetooth connection');
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
BLE Scanner
</ion-title>
<ion-buttons end>
<button ion-button (click)="scan()">
Scan
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let device of devices">
<h2>{{ device.name || 'Unnamed' }}</h2>
<p>{{ device.id }}</p>
<p>RSSI:{{ device.rssi }}></p>
</button>
</ion-list>
</ion-content>
The function scanError is not written in the video, I have wrote it.
This is the webview screenshot
this.setStatus function is not defined. However, in the video, the function has not been declared. I tried by declaring
setStatus:any
but the function still displayed the same message. Also, I am not able to get any messages in the console even if I remove the setStatus function.
I have included NgZone component at the beginning.
Is there any way to get this resolved or am I missing something?

You need to write a setStatus function in your code.
setStatus(message) {
console.log(message);
this.ngZone.run(() => {
this.statusMessage = message;
});
}
The code on the slides is abbreviated. The source code for the examples in the presentation is available on github https://github.com/don/ionic-ble-examples