I'm Learning Ionic v4 and the template are compiled successfully. But when I change these template to components examples like this one below, It gives error that I mention below.
What did i do wrong? And if the process I made for testing alert is wrong, how can I test codes and add pages in ionic?
I would be grateful if anyone can help me learn to use ionic. I have project to deliver in 2 weeks
Thanks
import { Component } from '#angular/core';
import { AlertController } from 'ionic-angular';
#Component({
templateUrl: 'template.html'
})
export class BasicPage {
constructor(public alerCtrl: AlertController) { }
doAlert() {
let alert = this.alerCtrl.create({
title: 'New Friend!',
message: 'Your friend, Obi wan Kenobi, just approved your
friend request!',
buttons: ['Ok']
});
alert.present()
}
}
ERROR in
./src/app/tab3/tab3.module.ts 16:58-
66
[ng] "export 'Tab3Page' was not
found in './tab3.page'
[ng] ERROR in
./src/app/tab3/tab3.module.ts 18:23-
31
[ng] "export 'Tab3Page' was not
found in './tab3.page'
[ng] ERROR in
./src/app/tab3/tab3.page.ts
[ng] Module not found:
./src/app/tab3/tab3.page.ts
[ng] Module not found: Error: Can't
resolve 'ionic-angular' in
'C:\Users\ASUS\Ionic\
app\src\app\tab3'
[ng] Time: 797ms
[ng] i ｢wdm｣: Failed to compile.
[ng]
[ng] ERROR in
src/app/tab3/tab3.module.ts(6,10):
error TS2305: Module
'"C:/Users/ASUS/Ionic/app
/src/app/tab3/tab3.page"' has no
exported member 'Tab3Page'.
[ng]
src/app/tab3/tab3.page.ts(3,33):
error TS2307: Cannot find module
'ionic-angular'**
There are various update in Ionic4.
import { AlertController } from '#ionic/angular'; // Ionic 4
import { AlertController } from 'ionic/angular'; // Ionic 3
you can add page using command line it will wire all things
https://ionicframework.com/docs/cli/commands/generate
ionic generate page your_page_name
Looks like your tab3 component(tab3.page.ts) is ok but there is problems with your tab3 module(tab3.module.ts same folder). Best way to get rid of this error is deleting tab3 page and recreating page with below command.
ionic generate page tab3
update this.
import { AlertController } from 'ionic-angular';
it will be
import { AlertController } from '#ionic/angular';
In ionic4, its changed that's why you are getting an error.
visit this link
Related
I'm running in the browser an ionic 5 APP using capacitor and I'm trying to use the file transfer functionality. I follow the documentation https://ionicframework.com/docs/native/file-transfer and configure my app using capacitor. Thus running:
npm install cordova-plugin-file-transfer
npm install #ionic-native/file-transfer
ionic cap sync
In my app.module, I registered the providers:
import { FileTransfer } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
...
providers: [
StatusBar,
SplashScreen,
...
FileTransfer,
File
],
Note that I also installed the native file package, so in total I have the following 4 new packages:
"#ionic-native/file": "^5.27.0",
"#ionic-native/file-transfer": "^5.27.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
My code in the component is:
import { Input, Component } from '#angular/core';
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
#Component({
selector: 'app-order-detail-order-card',
templateUrl: './order-detail-order-card.page.html'
})
export class OrderDetailOrderCardPage {
#Input() pdfUrl: string;
#Input() orderCardId: string;
constructor(private transfer: FileTransfer, private file: File) { }
public downloadFile(): void {
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(this.pdfUrl, this.file.applicationDirectory + `${orderCardId}.pdf`).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
}
When I run the app in the browser, I get the following warning and I'm not sure whether the file should donwload somewhere?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
Even if I don't get the file, I would be expecting to see the "download complete" message. It's not very clear to me as to whether I have to configure something else in my app to be able to run it locally or I have to use this functionality ONLY in either the emulator or the device itself.
What else needs to be configured to get this to work?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
this means that you are using the browser emulator which doesn't have any splashscreen, you can totally ignore that warning ( you won't get it using a simulator or a real device).
You should paste the html section of that page too, because probably the download doesn't start because an incomplete url and it doesn't proceed with the "then()"
maybe i'm wrong, but it can be possible.
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
I tried to use tensorflowjs in ionic. After converting existing model from python then import from ionic it works only when i runs on my local server (http://localhost:8100/ionic-lab)
However, when i build the project for android
tf.loadModel method not working, it fails to load model from local folder ( ie. assets/model )
I already checked this link Tensorflow.js with react-native
, but it doesn't help. I guess, lots of hybrid mobile app frameworks are pretty much the same line. Any advice and suggestions will be greatly appreciated.
import {Component} from '#angular/core';
import {IonicPage, AlertController} from 'ionic-angular';
import {HttpClient} from "#angular/common/http";
import * as tf from "#tensorflow/tfjs";
#IonicPage()
#Component({
selector: 'page-tfpretrainedversion',
templateUrl: 'tfpretrainedversion.html',
})
export class TfpretrainedversionPage {
kerasTraindedModel: tf.Model;
KERAS_MODEL_JSON = 'assets/model/model.json';
constructor(private httpClient: HttpClient,
private alertCtrl: AlertController) {
this.loadPretrainedModel();
}
loadPretrainedModel() {
tf.loadModel(this.KERAS_MODEL_JSON)
.then((result) => {
this.kerasTraindedModel = result;
})
.catch((error)=>{
let prompt = this.alertCtrl.create({
title: 'Error',
subTitle: error,
buttons: ['OK']
});
prompt.present();
});
}
}
Here is an error message
Failed to fetch
And here is a project structure
Project structure
TensorflowJs loads the models via fetch(). fetch() does not support loading local-files. https://fetch.spec.whatwg.org/
My Workaround:
Use a polyfill (https://github.com/github/fetch) and replace the fetch.
window.fetch = fetchPolyfill;
Now, it's possible to load local files (file:///) like:
const modelUrl = './model.json'
const model = await tf.loadGraphModel(modelUrl);
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'm trying to use Socket.io-client library in Angular 2 app.
There are tons of different guides related to fast changes that Angular 2 have in a past couple of months.
I don't know do I doing something wrong.
What I did?
npm install socket.io-client --save
After that in component:
...
import * as io from "socket.io-client";
...
export class MyComponent implements OnInit {
socket: SocketIOClient.Socket;
constructor() {
this.socket = io.connect("http://localhost:4200");
this.socket.on("connection", () => console.log("this is onl a test"));
}
}
}
When I open console I see following errors:
GET http://localhost:4200/socket.io/?EIO=3&transport=polling&t=LdBXte5 404 (Not Found)