The app working when i run ionic cordova run android --device but gives error when i try ionic cordova run android --prod --release
I am trying use ng2-qrcode into my lazy loaded page
Error: Unexpected value 'QRCodeComponent in
D:/qrstore/node_modules/ng2-qrcode/dist/ng2-qrcode.d.ts' declared by
the module 'ItemDetailPageModule in
D:/qrstore/src/pages/item-detail/item-detail.module.ts'. Please add a #Pipe/#Directive/#Component annotation.
at Error (native)
at syntaxError (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:1729:34)
at D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:15625:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:15607:54)
at addNgModule (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24403:58)
at D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24414:14
at Array.forEach (native)
at _createNgModules (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24413:26)
at analyzeNgModules (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24288:14)
ionic info
#ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
#ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 25.2.3
Node : v6.9.4
npm : 3.10.8
OS : Windows 10
Misc:
backend : pro
item detail module
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ItemDetailPage } from './item-detail';
import { HttpModule, Http } from '#angular/http';
//native
import { File } from '#ionic-native/file';
import { FilePath } from '#ionic-native/file-path';
import { SQLite } from '#ionic-native/sqlite';
//providers
import { ItemsProvider, LabelsProvider, SQLiteDatabaseProvider } from '../../providers/providers';
//components
import { ItemCreatePage } from '../item-create/item-create';
import { QRCodeComponent } from 'ng2-qrcode'
//directive
import { AbsoluteDragDirective } from '../../directives/absolute-drag/absolute-drag';
#NgModule({
declarations: [
ItemDetailPage,
QRCodeComponent,
AbsoluteDragDirective
],
imports: [
IonicPageModule.forChild(ItemDetailPage),
HttpModule
],
exports: [
ItemDetailPage
],
entryComponents: []
,
providers:[
ItemsProvider,
SQLite,
SQLiteDatabaseProvider,
File,
FilePath
]
})
export class ItemDetailPageModule {}
ng2-qrcode is no longer maintained and does not work with the AoT compiler of angular (which is used when you build your app with --prod). But there is a drop in replacement which is built for usage in Ionic3/Angular4+ projects which use the AoT compiler: angularx-qrcode. It is based on the same library and provides the same API.
Add it as follows:
npm install angularx-qrcode --save
And to use it import it in your NgModule:
import { QRCodeModule } from 'angularx-qrcode';
And then add it to the imports array:
imports: [
QRCodeModule
],
I'm the author of angularx-qrcode mentioned above.
For those coming here and using the angularx-qrcode-package, I prepared a working angular-app for angular5/6 to have an easier start:
https://github.com/Cordobo/angularx-qrcode-sample-app
master-branch: latest angular, at the time of posting angular6
angular5-branch: you guessed it, is for angular5
HTH
Related
I have an issue with an ionic app and branch SDK, at test ENV everything works as expected but users' in PROD crash continuously.
As stated in the branch docs I have initialized branch on platform ready event at app.component.ts:
app.component.ts
import { Component } from "#angular/core";
import { Platform } from "ionic-angular";
import { StatusBar, Splashscreen } from "ionic-native";
import { TabsPage } from "../pages/tabs/tabs";
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
branchInit();
});
platform.resume.subscribe(() => {
branchInit();
});
// Branch initialization
const branchInit = () => {
// only on devices
if (!platform.is("cordova")) {
return;
}
const Branch = window["Branch"];
Branch.initSession().then(data => {
if (data["+clicked_branch_link"]) {
// read deep link data on click
alert("Deep Link Data: " + JSON.stringify(data));
}
});
};
}
}
The error is as follows:
Unable to instantiate receiver io.branch.referral.InstallListener: java.lang.ClassNotFoundException: Didn't find class "io.branch.referral.InstallListener"
Here's my ionic info
Ionic:
Ionic CLI : 5.4.15 (/Users/path/.nvm/versions/node/v9.6.0/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.11.5
#angular-devkit/build-angular : 0.12.4
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.2.4
#ionic/angular-toolkit : 1.3.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 30 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 0.3.0) : 0.2.7
System:
Android SDK Tools : 26.1.1 (/Users/path/Library/Android/sdk)
NodeJS : v9.6.0 (/Users/path/.nvm/versions/node/v9.6.0/bin/node)
npm : 2.15.12
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61
I didn't find good documentation about the issue and I am not sure if removing the library will result in not getting the install referrer, but after some investigation, I decided to remove these lines from AndroidManifest.xml
<receiver android:name="io.branch.referral.InstallListener" android:exported="true">
<intent-filter>
<action android:name="com.android.vending.INSTALL_REFERRER" />
</intent-filter>
</receiver>
The following link talks about a communication sent by branch and outdated documentation and makes allusion to the above solution.
https://github.com/BranchMetrics/unity-branch-deep-linking-attribution/issues/171
I think it can be fixed with switching to new Install referrer. Because this crash started from builds that have been released in March, and it tells that from March 1, 2020 it's deprecated: https://android-developers.googleblog.com/2019/11/still-using-installbroadcast-switch-to.html
I want to use InAppBrowser to open all target blank links. I follow the documentation and I always get an error when I declare the plugin on constructor:
Can't resolve all parameters for MyApp: (?, ?, ?).
This error appears to me when I put private iab: InAppBrowser on constructor.
My code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import { Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public plt: Platform, private iab: InAppBrowser) {
this.plt.ready().then((readySource) => {
console.log("Ready!");
window.open = this.iab.open;
});
}
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,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Someone knows whats it can be?
Thanks!
Your code looks good, so the problem seems to be because of the #ionic-native/core version that your project uses.
As you can see in the docs the Ionic team has updated the Ionic Native commands in order to avoid this error:
Installation
To add Ionic Native to your app, run following command to install the core package:
npm install #ionic-native/core#4 --save
And...
Usage
Install the Needed Plugins
Install the Ionic Native package for each plugin you want to add.
For example, if you want to install the Camera plugin, you will need to run the following command:
npm install #ionic-native/camera#4 --save
Then install the plugin using Cordova or Ionic CLI. For example:
ionic cordova plugin add cordova-plugin-camera
Notice the #4 in both commands. That allows you to install the right version of the Ionic Native dependencies even if you're using the new CLI.
TLDR; So if you installed the plugin using the #4 you can import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser';
If not, you may be using a newer version of Ionic Native so you need to import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser/ngx'
I'm having difficulties with getting GeoLocation working in Ionic 3. I've
looked at several tutorials and run into the same problem with all of them.
Here is my setup.
PS C:\> ionic info
cli packages: (C:\Users\myID\AppData\Roaming\npm\node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 8.1.2 (cordova-lib#8.1.1)
local packages:
#ionic/app-scripts : 3.1.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.10.0
npm : 5.6.0
OS : Windows 10
PS C:\>
PS C:\>
PS C:\>
PS C:\> ionic cordova plugin list
> cordova plugin ls
v Running command - done!
cordova-plugin-geolocation 4.0.1 "Geolocation"
PS C:\>
PS C:\>
PS C:\>
In setting up a hello-world / blank geo location app, I get errors referencing the
GeoLocation plugin.
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // <-- Errors here
]
I can get around this error by adding the ngx suffix:
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation/ngx';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // OK now
]
However, when I actually go to use it:
//home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation/ngx';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
lat: any;
lng: any;
constructor(public navCtrl: NavController,
public geo: Geolocation) {
}
ionViewDidLoad() {
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));
}
}
I start getting this error:
TypeError: Object(...) is not a function at Geolocation.getCurrentPosition
Commenting out the call to getCurrentPosition makes the error go away.
What have I missed? Have I got the wrong version of the plugin? Is there a way
to know which one works with the last version of Ionic 3?
Did you install the Geolocation plugin v3? As you can see here, the command is:
$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
$ npm install --save #ionic-native/geolocation#4
After installing it, you have to import the plugin into app.module as well into your home.ts
import { Geolocation } from '#ionic-native/geolocation';
The code to use the plugin is right, so you don't need to change it.
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));
I have a problem with ngx-translate within a Ionic App when I try to build a production release.
During development translations work fine with
ionic serve
and
ionic cordova build android
but if I try to make a production build using
ionic cordova build android --prod --release
or for the PWA
ionic build --prod
I get some errors like
[17:47:15] typescript error
The pipe 'translate' could not be found ( ... )
Versions:
ngx-translate: 8.0.0
Ionic: 3.9.2
Angular: 5.2.10
I checked with: https://github.com/ngx-translate/core/tree/v8.0.0 and can't find what I am doing wrong.
In app.module:
// https://github.com/ngx-translate/core#1-import-the-translatemodule
// AoT requires an exported function for factories
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader( http, './assets/i18n/', '.json' );
}
#NgModule( {
...
imports: [
...
TranslateModule.forRoot( {
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [ Http ]
}
}
),
...
And in one of my pages which produce this error:
import { TranslateModule, TranslateService, TranslatePipe } from '#ngx-translate/core';
#NgModule({
imports: [
TranslateModule
],
exports: [
TranslateModule
]
})
export class ContactPage { ... }
Searching through SO produced mainly the hint to import & export the TranslateModule in the page as well as importing the TranslatePipe, but both of these changes didn't solve my problem. How do I configure the translation module so that it works in a production build?
OK, solved it. I added the import & export statement of the TranslateModule to the page class, but correct is to add it the the corresponding module.
In my example:
Wrong:
contact.ts
#NgModule({
imports: [
TranslateModule
],
exports: [
TranslateModule
]
})
export class ContactsPage {...}
Correct:
contact.module.ts
#NgModule( {
...
imports : [
...
TranslateModule
],
exports : [
TranslateModule
]
} )
export class ContactsPageModule {
}
I'm working on an Ionic project based on geolocation and after testing my App on four real devices, I distinguished three different behaviors:
1) Android 4.x ( J1 Samsung) => works Correctly
2) Android 5.0.1 => The first time I install the App all works as expected but when I disable GPS and enable it again, the geolocation returns a position which is far about 1Km of my position and it still bugged until I restart the Phone and then it works correctly again until I restart GPS.
3) Android 5.1 => Same scenario of the Android 5.0.1 but after turning GPS OFF and enabling it again, the geolocation still returning an error "timeout" until I restart the Phone.
Please, I have to know if there is no solution or I can continue with this plugin?
Home.ts:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation';
declare const google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController,
private platform:Platform,
private geolocation:Geolocation) {
}
ionViewDidLoad(){
new Promise(resolve => {
setTimeout(() => {
this.initMap();
resolve();
},2000);
})
.then(()=>{
setTimeout(() => {
this.getGeolocation();
},2000);
});
}
initMap() {
// map implementation
}
getGeolocation(){
this.platform.ready().then(() => {
alert('start geolocation');
var options = {
timeout: 20000,
enableHighAccuracy:true,
};
this.geolocation.getCurrentPosition(options).then(resp => {
alert('done');
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
let origin = new google.maps.LatLng( resp.coords.latitude,resp.coords.longitude);
this.addMarker(origin);
this.map.setCenter(origin);
}).catch((error) => {
this.debugError(error);
alert('error geoloc');
});
});
}
addMarker(location) {
//addMarker implementation
}
debugError(object){
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.log(output);
}
}
ionic info:
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME : xxx
Misc:
backend : pro
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME: xxx/Sdk
Misc:
backend: pro