I am trying to use ionic 4 and cordova-plugin-file to get files from phone but it trows an error;
When i do console.log(cordova.file) like in the doc it shows cordova does not have property 'file'.
When i do
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail); it show 'requestFileSystem' not a property of window.
even if i do window.cordova it trow thesame error.
and unlike ionic 3 here if i add File to providers it trows an error as well
Please what is it i'm doing wrong?
Here is my ** home.page.ts**
import {Component} from '#angular/core';
import {Platform} from '#ionic/angular';
import {File} from '#ionic-native/file';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public platform: Platform) {
platform.ready().then(() => {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
console.log(fileSystem)
}, function(error) {
console.log(error);
});
});
}
}
For Ionic 4 you should add 'ngx' at the end of the import.
Like this,
import {File} from '#ionic-native/file/ngx';
Make sure to add it to the providers list of your module file, and also inject it to the constructor of the class where ever you are using the plugin.
Reference https://ionicframework.com/docs/native
Related
I need to open payment method url inside ionic app, but i didn't found any solution of that. I have tried Iframe but it doesn't work for payment method urls, because of security reasons i guess. I have also treid InAppBrowser that doesn't work.
What I have tried open the url in browser but i need it to open within app.
Any solution?
You can use InAppBrowser-plugin to open an external url.
Install:
ionic plugin add cordova-plugin-inappbrowser --save
npm install --save #ionic-native/in-app-browser
See here:
import { Component , OnInit } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{
constructor(public navCtrl: NavController,private iab: InAppBrowser) {
}
ngOnInit(){
const browser = this.iab.create('https://www.stackoverflow.com','_self',{location:'no'});
}
}
I am working on an Ionic project. I am trying to integrate the CKEditor module on my project.
<ckeditor [(ngModel)]="content" editor="Editor">
</ckeditor>
I am getting an error though:
'ckeditor' is not a known element.
So, I tried some solutions, which I have found on the internet, but unfortunately, nothing worked for me.
I tried including the CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA. I included the FormsModule, but no chance.
I was wondering, if you could help me, please?
Thank you in advance.
so i solved the problem. I did the following:
var textarea = document.getElementById('editor1');
const ClassicEditor = require( '#ckeditor/ckeditor5-build-classic' );
ClassicEditor.create( document.getElementById( 'editor1' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
install both these packages in your angular or angular-ionic app.
npm install --save #ckeditor/ckeditor5-angular
npm install --save #ckeditor/ckeditor5-build-classic
then import in module app.module.ts, and use it in component.
import * as CKEditor from '#ckeditor/ckeditor5-build-classic';
#Component({
selector: 'app-editor',
template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
styleUrls: ['./edit-summary.component.scss']
})
export class EditorComponent {
summary: string = `<p>Lorem ipsum</p>`
public editor = CKEditor
constructor() {
}
}
If ckeditor is not found then read following:
i.e. you have component summary.component and it is declared in summary.module then it is necessary to import CKEditorModule in summary.module.
let say you have summary.module.ts like:
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
#NgModule({
declarations: [
SummaryComponent
],
imports: [
CommonModule,
CKEditorModule,
],
exports: [
SummaryComponent
],
})
export class SummaryModule { }
then import CKEditor in summary.component.ts
import * as CKEditor from '#ckeditor/ckeditor5-angular';
#Component({
selector: 'app-edit-summary',
template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
styleUrls: ['./edit-summary.component.scss']
})
export class EditSummaryComponent {
summary: string = `<p>Lorem ipsum</p>`
public editor = CKEditor
constructor() {
}
}
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 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
I've been going through the Angular2 Quickstart and tutorials and now I'm trying to get set up pulling data from a live REST Api. I need to pass in authentication parameters with the Api call and everything I'm reading says I should be putting those parameters into the ENV variables.
I can't work out exactly how I should be doing this. I've created a .env file on my local server, I've used NPM to instal dotenv to my project, but none of the examples I can find for how to use dotenv seem to fit with the TypeScript import syntax I'm used to.
Here's my main.ts:
import { } from 'dotenv/config';
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
And a sample app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>Up and running!</h1>
<p>Do not show this at home: {{process.env.TWITTER_CONSUMER_KEY}}</p>
`,
styleUrls: ['style.css']
})
export class AppComponent {
}
Any help would be appreciated. I've been out of the coding loop for a while and this is all a bit new to me.
Bonus question, would I still have the .env file when I go to a live server or does it change?
I think you need to initialize the dotenv config method:
dotenv.config();
I usually use as follow:
import * as dotenv from 'dotenv';
//Later in your code
dotenv.config();
Then you may use your environment variables.
I was having the same problem. Couldn't find a proper solution so I did something like this:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>Up and running!</h1>
<p>Do not show this at home: {{twitterConsumerKey}}</p>
`,
styleUrls: ['style.css']
})
export class AppComponent {
public twitterConsumerKey:string;
ngOnInit() {
this.twitterConsumerKey = process.env.TWITTER_CONSUMER_KEY;
}
}