Ionic 4 use server-side rendering ?
Pipe could not be found in ionic4
@aligassan wrote:
recently l create my own pipe in ionic4 name is
StatusairportPipe
. Then l imported it inapp module.ts
, now when l am trying to use it l got errors:ERROR Error: Uncaught (in promise): Error: Template parse errors: The pipe 'my' could not be found (" <td text-center>{{item?.flight.aircraft.model.code}}</td> <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td> </tr>
StatusairportPipe
model tsimport { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'my' }) export class StatusairportPipe implements PipeTransform { public states: Object = { 'scheduled': 'مجدولة', }; transform(value: string, ...args) { // This is our catch for data that hasn't interpolated // from its source yet, a basic async fix. if(value == null) return; // Otherwise, lookup the state name from the acronym if(this.states[value]){ return this.states[value]; } else { return value; } } }
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 { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HTTP } from '@ionic-native/http/ngx'; import { Network } from '@ionic-native/network/ngx'; import { StatusairportPipe } from './statusairport.pipe'; @NgModule({ declarations: [AppComponent, StatusairportPipe ], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, HTTP, Network ], bootstrap: [AppComponent] }) export class AppModule {}
Posts: 1
Participants: 1
Ionic 3 : cannot read property 'addEventListener' of null : Google Maps
@naveenvuppu wrote:
iam getting this error some times … please help
code :
google.maps.event.addListenerOnce(this.infoWindow, ‘domready’, () => {
document.getElementById(‘showDirections’).addEventListener(‘click’, () => {
//alert(‘Clicked’);
this.navCtrl.push(DirectionsMapsPage, {
latde: latde,
longtde: longtde
});
});
});
Posts: 1
Participants: 1
Use Ionic File from Folder
@Vartone wrote:
Hi,
I try to use Document From FilePicker and display a SVG file in my application.
Currently I can have the file location with this codethis.filePicker.pickFile() .then(uri => { this.goToWire({"url": uri}) }) .catch(err => console.log('Error', err));
But when i try to use it like :
TS File :this.svg = "file://"+this.params;
HMTL File :
<object type="image/svg+xml" [data]="svg" id="my-embed"></object>
Nothing append. I have an empty place in the application.
I try to use object, embed and iframe in order to display SVG file
I also try this kind of things :
this.file.resolveLocalFilesystemUrl(this.params) .then((fileEntry: FileEntry) => { console.log(fileEntry); this.svg = fileEntry.nativeURL; alert(this.svg); });
What I want to do ?
I want to display/zoom/edit an SVG file located in folder from apple application (I use an application named “Documents” from apple store to store my file.
Everything works when i use an assets file.
But when I try to use a file picked in Folder, nothing works anymore.Thank you for answer,
Posts: 1
Participants: 1
Ionic 4 Browser Support
@neilsherman wrote:
The page at: https://ionicframework.com/docs/intro/browser-support suggests that IE 11 is a supported browser for running an Ionic 4 app, however I can not get an Ionic 4 app to run in IE 11.
Steps to reproduce:
ionic start test sidemenu
ionic serveOpening in IE 11, I see the following error in the console:
Exception thrown and not caught:
_for-of.jsIonic:
ionic (Ionic CLI) : 4.10.2 (C:\Users\neil\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0System:
NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows Server 2016Can anybody confirm whether IE is actually supported?
Posts: 1
Participants: 1
Reuse tag from ionic
@mdline wrote:
Hello,
I want to write my custom tag based on
ion-segment
, becaue I will make changes on the component file.My tag is named
ion-custom-segment
.How can I tell in my scss file to take the style from
ion-segment
or should I have to copy the styles in to my scss file?
Posts: 1
Participants: 1
Working on 2 different computers
@goudden wrote:
Hello, what is the best way to keep the versions of Npm, ionic, cordova, node, node modules, etc, synchronized in the computer of work and home. Beyond the version control of the project, how do I make both computers have the same development environment.
any ideas ?? any advice ?? some tool ??
oswaldo.
Posts: 1
Participants: 1
Ionic v4 lazy loading not working after migrating from v3
@yavorivanov wrote:
I had working lazy loading in v3 and after updating with v4 it stopped working.
What i have is:Ionic: ionic (Ionic CLI) : 4.10.2 Ionic Framework : ionic-angular 3.9.3 @ionic/app-scripts : 3.2.2 Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 6.3.0, ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 18 other plugins) System: NodeJS : v9.8.0 (/usr/local/bin/node) npm : 5.6.0 OS : macOS High Sierra Xcode : Xcode 9.2 Build version 9C40b
with angular/core@5.2.11
i made app-routing.module.ts:
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', loadChildren: '../pages/home/home.module#HomePageModule'} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
app.module.ts looks:
import { AppRoutingModule } from '../app/app-routing.module'; ... imports: [ RouterModule, CommonModule, AppRoutingModule, ...
home.module.ts is:
import { NgModule } from '@angular/core'; import { HomePage } from './home'; import { TranslateModule } from '@ngx-translate/core'; import { Routes, RouterModule } from '@angular/router'; import { IonicModule } from 'ionic-angular'; import { CommonModule } from '@angular/common'; const routes: Routes = [ { path: '', component: HomePage } ]; @NgModule({ declarations: [HomePage], imports: [ IonicModule, CommonModule, RouterModule.forChild(routes), TranslateModule.forChild() ], exports: [RouterModule] }) export class HomePageModule { }
app.html:
<ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>
app.component.ts:
... @Component( { templateUrl: 'app.html' } ) ... this.router.navigateByUrl('/home');
With this code i am getting :
Templete parse errors: "ion-router-outlet" is not a known element: 1. If "ion-router-outlet" is an Angular component, then verify that it is part of this module. ...
if i use “router-outlet” (without )i have this error :
Uncaught (in promise). Error: Cannot find module '../pages/home/home.module'. Error: Cannot find module '../pages/home/home.module' at ...
Unfortunately i cant find any proper guide how to migrate the lazy loading
Posts: 1
Participants: 1
Please help Im a beginner. im stuck with a simple form ionic 4
@rajathdevapp wrote:
core.js:15713 ERROR Error: Uncaught (in promise): Error: Template parses errors:
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’my page.html
<ion-input type="text" name="reason"></ion-input> </ion-item> <ion-button expand="block" shape="round" (click)="apply()">Apply</ion-button> </form>
app.module.ts
import { NgModule, enableProdMode } 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 { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { BarcodeScanner } from ‘@ionic-native/barcode-scanner/ngx’;
import { Device } from ‘@ionic-native/device/ngx’;
import { HttpModule } from ‘@angular/http’;
import { HttpClientModule } from ‘@angular/common/http’;
import { Toast } from ‘@ionic-native/toast/ngx’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from ‘@angular/forms’;enableProdMode();
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpModule, HttpClientModule, ReactiveFormsModule],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
Device,
Toast,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}tab3.page.ts
import { Component, enableProdMode } from ‘@angular/core’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule } from ‘@angular/forms’;@Component({
selector: ‘app-tab3’,
templateUrl: ‘tab3.page.html’,
styleUrls: [‘tab3.page.scss’]
})export class Tab3Page {
loginForm : FormGroup; constructor(public formBuilder: FormBuilder){} ngOnInit() { imports: [ ReactiveFormsModule ] }
}
Posts: 1
Participants: 1
How can i show Discounted Prices if its available?
@harshm90 wrote:
How can i show the prices like show in below image ? Please help!! im new to ionic
Posts: 1
Participants: 1
Get data from webhost
@safaAlshaarri wrote:
hi every one i have project where i need to get data from server
i’m using 000webhost i have the code herethis.http.get('http://daleel-ksu.000webhostapp.com/feed.php', {}, {}) .then(data => { console.log("d"+data); }) .catch(error => { console.log(error); });
but the problem that i get nothing even i dont get any error do i need to use api and how i can i use it
here is my php<?php $mysqli = new mysqli("localhost", "h", "j", "data"); $query = "SELECT * FROM daleel"; $dbresult = $mysqli->query($query); while($row = $dbresult->fetch_array(MYSQLI_ASSOC)){ $data[] = array( 'id' => $row['NID'], 'name' => $row['name'] ); } if($dbresult){ $result = "{'success':true, 'data':" . json_encode($data) . "}"; } else { $result = "{'success':false}"; } echo($result); ?>
please help it’s urgent
Posts: 1
Participants: 1
Activate virutal keyboard in Ionic 3 UWP
@ezikoh wrote:
Hi.
I have an app in ionic 3, I compile to UWP in windows 10, but the question is.Is there any way to activate the virtual keyboard of WIndows 10 when accessing a field, when an application of Ionic 3 is executed in UWP? or how activate virutal keyboard automatically when the user fill the input field?
Thank you.
Posts: 1
Participants: 1
Some Modules not found after ionic 3 to ionic 4
@tejveersingh wrote:
Facing this issue after upgrading to ionic 4@latest
Module not found. net tls are defined in all the files.
“net = require(‘net’), tls = require(‘tls’)”
Posts: 1
Participants: 1
Ionic cordova requirements
@blondie63 wrote:
Hi all, my mac configuration:
System:
Android SDK Tools : 26.1.1 (/Users/mauro/Library/Android/sdk/)
ios-sim : 7.0.0
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61Running cmd: “ionic cordova requirements” i’ve this:
Android Studio project detected
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28,android-27,android-26
Gradle: installed /usr/local/Cellar/gradle/5.1.1/bin/gradleRequirements check results for ios:
Apple macOS: installed darwin
Xcode: installed 10.1
ios-deploy: not installed
ios-deploy was not found. Please download, build and install version 1.9.2 or greater from https://github.com/phonegap/ios-deploy into your path, or do ‘npm install -g ios-deploy’
CocoaPods: installed 1.5.3
Some of requirements check failedIs it normal ?
Thanks for help
Posts: 1
Participants: 1
[Ionic 4] Routing between tab detail pages
@Glaenzesch wrote:
Hello everybody,
i have a question regarding tab navigation in the ionic r4 release and i hope you can help me.
Here is the situation:I have 3 tabs:
- Tab1 (List items of type A)
- Tab2 (List items of type B)
- Tab3 (List of forwarded items of type A and type B)
Tab1 & Tab2 display a list with items. By clicking on an item in Tab1 you are forwarded to a details page inside Tab1. By clicking on an item on Tab2 you are forwarded to a details page inside Tab2. Each details page has a different view. When you click on an item in Tab 3 you are forwarded to the details page of Tab1 or Tab2, depending on the item type.
To route between the tabs i use
this.router.navigate(['./pipeline/tab1/tab1-details', id]);
This working quite good. My goal is the “reuse” the detail pages instead of coding it twice.But here’s my issue. When i’m in tab1-details and want to route back with
this.router.navigate(['./pipeline/tab3]);
the forwarded list of my items is displayed. But when i click on the tab1 button below in the ion tab bar the view is still stuck inside the tab1-details page.
How can i show the item list of type A instead of the details?This is my routing:
const routes: Routes = [ { path: 'pipeline', component: PipelinePage, children: [ { path: 'tab1', children: [ { path: '', loadChildren: './tab1/tab1.module#Tab1PageModule' }, { path: 'tab1-details/:id/', loadChildren: './tab1/tab1-details/tab1-details.module#Tab1DetailsPageModule' }, ] }, { path: 'tab2', children: [ { path: '', loadChildren: './tab2/tab2.module#Tab2PageModule' }, { path: 'tab2-details/:id/', loadChildren: './tab2/tab2-details/tab2-details.module#Tab2DetailsPageModule' }, ] }, { path: 'tab3', children: [ { path: '', loadChildren: './tab3/tab3.module#Tab3PageModule' } ] }, { path: '', redirectTo: '/pipeline/tab1', pathMatch: 'full' } ] }, { path: '', redirectTo: '/pipeline/tab1', pathMatch: 'full' } ];
Has anyone an idea? Thanks in advance
Posts: 1
Participants: 1
Export apk android (ionic4)
@fahd123 wrote:
Hii
Please, How to export apk android without use android studio ?
Posts: 1
Participants: 1
[ioniv 4] ion-menu as menu.componetn problem
@zajcman wrote:
Good morning
I have got strange problem with ion-menu when i use it as component inside ion-split-pane.
I see Menu title but i can’t see menu elements (see print screen)
Can be bug ?
Thank you for your help!
Posts: 1
Participants: 1
Can ionic-native/geolocation asks for google API's or payment after certain amount of time or daily quota is more for calling geolocation methods?
@ashokInceptive wrote:
Can ionic-native/geolocation ask for google API’s or payment after a certain amount of time or daily quota is more for calling geolocation methods?
Posts: 1
Participants: 1
Ionic4 how to navigate inside modal
@askona1 wrote:
I’m opening new modal window, and I want to start new navigation within this window. But, when I’m doing
router.navigate(…) it pushes page, that behind modal window (from which I opened this modal)
Posts: 1
Participants: 1
Using Storage with Android
@ewehrmann wrote:
Trying to use the Storage module to make an Http request, save the data set to a named key and then retrieve and display the data.
With my current code base this is working from the browser (ionic serve) but not from the emulator (ionic cordova emulate android).
I have tried adding and removing SQL Lite. It doesn’t work either way. Here is the output I get:
With SQL Lite installed:
[app-scripts] [08:48:18] console.log: OPEN database: _ionicstorage
[app-scripts] [08:48:18] console.log: new transaction is queued, waiting for open operation to finish
[app-scripts] [08:48:18] console.log: OPEN database: _ionicstorage - OK
[app-scripts] [08:48:18] console.log: DB opened: _ionicstorage
[app-scripts] [08:48:18] console.log: nullWithout SQL Lite installed:
[app-scripts] [08:44:20] console.log: OPEN database: _ionicstorage
[app-scripts] [08:44:20] console.log: new transaction is queued, waiting for open operation to finish
[app-scripts] [08:44:20] console.log: OPEN database: _ionicstorage FAILED, aborting any pending transactions
[app-scripts] [08:44:20] console.log: Could not open databaseAny suggestions on what I can do here?
Posts: 1
Participants: 1