I have installed filetransfer plugin as it mention here
Here is the code in the app.module.ts:
import { FileTransfer } from '#ionic-native/file-transfer';
providers: [
...
FileTransfer,
...
]
Here is the error
Type 'FileTransferOriginal' is not assignable to type 'Provider'.
Type 'FileTransferOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactoryts(2322)
(alias) const FileTransfer: FileTransferOriginal
import FileTransfer
You installed the latest #ionic-native/file-transfer (v5+).
Then you should import FileTransfer from #ionic-native/file-transfer/ngx
import { FileTransfer } from '#ionic-native/file-transfer/ngx';
Or else install #ionic-native/file-transfer with v4+, then you can import FileTransfer from #ionic-native/file-transfer
import { FileTransfer } from '#ionic-native/file-transfer';
Related
I am trying to get my angular webapp working with a star sp 700 receipt printer and am trying to integrate qz-tray into my software for that reason. I am getting an error when trying to install #types/qz-tray which is displayed below. Also I get an error
unresolved variable websocket
on the line 23 and
unresolved variable api
on line 16.
Can someone please tell me how to fix this and if there is a better way of printing to either this or another receipt printer through angular?
import { Injectable } from '#angular/core';
import { from as fromPromise, Observable, throwError } from 'rxjs';
import { HttpErrorResponse } from '#angular/common/http';
import { catchError, map } from 'rxjs/operators';
import * as qz from 'qz-tray';
import { sha256 } from 'js-sha256';
#Injectable({
providedIn: 'root'
})
export class PrinterService {
//npm install qz-tray js-sha256 rsvp --save
constructor() {
qz.api.setSha256Type(data => sha256(data));
qz.api.setPromiseType(resolver => new Promise(resolver));
}
// Get the list of printers connected
getPrinters(): Observable<string[]> {
console.log('+++++++++PrinterService+++++');
return fromPromise(
qz.websocket.connect().then(() => qz.printers.find())
)
map((printers: string[]) => printers)
, catchError(this.errorHandler);
}
// Get the SPECIFIC connected printer
getPrinter(printerName: string): Observable<string> {
return fromPromise(
qz.websocket.connect()
.then(() => qz.printers.find(printerName))
)
map((printer: string) => printer)
, catchError(this.errorHandler);
}
// Print data to chosen printer
printData(printer: string, data: any): Observable<any> {
const config = qz.configs.create(printer);
return fromPromise(qz.print(config, data))
map((anything: any) => anything)
, catchError(this.errorHandler);
}
private errorHandler(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.log(error.error);
console.log('An error occurred:', error.status);
return throwError(error.error);
} else {
console.log('An error occurred:', error.status);
console.log(error.error);
return throwError(error.error);
}
};
}
unresolved variable websocket
unresolved variable api
These are both signs that qz-tray.js did not load properly.
The objects qz.api and qz.websocket are both part of the qz namespace. If they're not available, then qz was never imported properly.
Here's a working example of QZ Tray running in Angular:
https://stackblitz.com/edit/angular-3h4cnv
The import line appears to be correct and matches that of the QZ Tray angular quickstart guide.
The import * as qz should be valid according to TypeScript guidelines on exporting the default export of a module however you can safely convert it to import { default as qz } from "qz-tray";
As a troubleshooting step, you can call:
console.log(qz);
If loaded properly, it should show something like this:
Another troubleshooting technique would be to remove and reinstall qz-tray using your preferred package manager npm uninstall qz-tray; npm install qz-tray, etc.
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 have created new Ionic 3 application using the latest version of Ionic CLI v4.9.0 using below
$ ionic start Ionic3Project blank --type ionic-angular
which create V4 Ionic project by default.
Then I followed steps for Native App Version Plugin here
Faced following console error when imported in app.module.ts file
Uncaught Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [StatusBar, ?[object Object]?, ...]
at syntaxError (compiler.js:486)
at compiler.js:15784
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15752)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15320)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
app.module.ts file
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 { AppVersion } from '#ionic-native/app-version';
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,
AppVersion, <-- Error [[ts]
Type 'AppVersionOriginal' is not assignable to type 'Provider'.
Type 'AppVersionOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]]
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
UPDATE:Finally I found solution and explanation of this issue here :P
This issue is because of ionic new update(releasing ionic 4)
You have to import your plugins for ionic 3 like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
More info here
This error is thrown because of the new update of ionic 4.
The above given solution would work perfectly.
But, this must be done throughout the project to avoid this error.
The other way could be to roll back to plugin's previous version.
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
I am working with ionic v3.2.0 and as a part of requirement I have created another root component named as start.component.ts and start.modulue.ts. Which is a just copy of app.component.ts and app.modulue.ts.
I have implemented lazy loading in appModule.
main.ts
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
app.component.ts
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = "LoginPage";
...
}
Everything is working fine and Login module is getting load.
No I changed to startModule
main.ts
import { StartModule } from "./start.module";
platformBrowserDynamic().bootstrapModule(StartModule);
start.component.ts
export class StartApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = "LoginPage";
...
}
This is giving me error like :
main.js:1436 ERROR Error: Uncaught (in promise): invalid link: LoginPage
login.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
#NgModule({
declarations: [
LoginPage
],
imports: [
IonicPageModule.forChild(LoginPage)
],
exports: [
LoginPage
]
})
export class LoginPageModule {}
login.ts
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
....
}
P.S. : If I remove LazyLoding, everything is working fine. And I have tried using latest ionic version 3.4.0, but same error.
Solution rename your file from start.module.ts back to app.module.ts.
because when ionic start compilation it start looking for file named app.module.ts when it didn't find it in app directory; then generate warning and error similar to this
The main app NgModule was not found at the following path:
C:\Users\muham\Documents\ionic-projects\todo\src\app\app.module.ts
Which means it is hard coded in ionic-cli for compilation process. So, application require file named app.module.ts in app to compile and build.
Hopefully this will resolve the problem