With ionic 3 it was possible to access local assets via angular http client by using: ${location.protocol}//${location.host}/assets/
e.g:
capacitor://localhost/assets/locales/en_US.yaml
This seems to be no longer possible (on native device) with ionic 5. How can i read local assets on native device?
thnx in advance 
2 posts - 1 participant
Hi ,
I am creating an MOBILE application where it is required to have a table on one tab . Well that table is having left most column is fixed one.
So when I just try to scroll that table horizontally , instead of table get scrolled , super tab is scrolled. Following is the code snippet
Home page.html
<ion-header>
<ion-toolbar>
<ion-title>home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<super-tabs [config]="config" >
<super-tabs-toolbar slot="top" style="color:white;">
<super-tab-button>
<ion-label>Tab 1</ion-label>
</super-tab-button>
<super-tab-button>
<!-- <ion-icon name="home"></ion-icon> -->
<ion-label>Tab 2</ion-label>
</super-tab-button>
</super-tabs-toolbar>
<super-tabs-container>
<super-tab>
<ion-card class="ion-no-padding ion-no-margin">
<ion-card-content class="ion-no-padding ion-no-margin">
<table-component></table-component>
</ion-card-content>
</ion-card>
</super-tab>
<super-tab>
Tab 2 content
</super-tab>
</super-tabs-container>
</super-tabs>
</ion-content>
home.page.ts
import { Component, OnInit } from '@angular/core';
import {SuperTabsConfig } from '@ionic-super-tabs/core'
@Component({
selector: 'vedic-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
constructor() { }
ngOnInit() {
}
config: SuperTabsConfig = {
sideMenu: 'left',
shortSwipeDuration: 1500,
nativeSmoothScroll:true,
transitionDuration:0,
allowElementScroll:true
//debug:true
};
}
table-component.html
<ion-card class="ion-no-padding ion-no-margin">
<ion-card-content class="ion-no-padding " >
<div class="zui-wrapper" >
<div class="zui-scroller" >
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</ion-card-content>
</ion-card>
table.component.css
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 101px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: auto;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 100px;
}
SO issue is , when I scroll right to a table , tab is also get scrolled and I jump to tab2 .
So kindly help me out on how to fix this issue. Please let me know if anything else is required.
Thanks
1 post - 1 participant
Is there a reason we cannot get the properties for the components in intellisense in visual studio code, like we get with react?
Or is there some specific configuration I need to add thanks.
Also can we get a @ionic/vue specific tag?
1 post - 1 participant
I’m creating a popover on one Page when clicking on a label. It should open there and it worked while using tabs as navigation. Now i changed the tab navigation from the tab.module to the app-routing.module, because I want the tabs to show on every page. Now when I’m clicking on the label (“bewertung”) to open the popover (“rateus”) it doesn’t show at the 5th tab (“more”), where it should open but when i navigate to the 1st tab (“home”) it is opened there and i cant interact with it.
more.page.ts
import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPage } from 'src/app/popover/rateus/rateus.page';
@Component({
selector: 'app-more',
templateUrl: './more.page.html',
styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {
constructor(
private popoverController: PopoverController,
private modalController: ModalController
) { }
ngOnInit() {
}
async presentPopover() {
console.log('I got clicked')
const popover = await this.popoverController.create({
component: RateusPage,
});
popover.present();
}
}
rateus.page.html
<ion-item>
<ion-label>
Bewertung
</ion-label>
</ion-item>
<ion-content padding>
<ion-button expand="full" (click)=rateusDismiss()>Close</ion-button>
</ion-content>
rateus.page.ts
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
selector: 'app-rateus',
templateUrl: './rateus.page.html',
styleUrls: ['./rateus.page.scss'],
})
export class RateusPage implements OnInit {
constructor(private popoverController: PopoverController) { }
ngOnInit() {
}
rateusDismiss(){
console.log("dismiss")
this.popoverController.dismiss();
}
}2 posts - 2 participants
I have a APIs in Laravel in localhost and with ionic runing android device with USB
but a get this error http://127.0.0.1:8000/api/v1/login net::ERR_CONNECTION_REFUSED
How can I access my Api in my localhost with ionic run android -l ?
4 posts - 2 participants
I got the below error in the play store crash report. In any block we can’t able to find the solution and root cause of this issue.
Mainly this is occurred for Motorola and Huawei devices.
Android 7,9
Full stack-trace:
java.lang.RuntimeException:
at android.app.ActivityThread.deliverResults (ActivityThread.java:5078)
at android.app.ActivityThread.handleSendResult (ActivityThread.java:5120)
at android.app.servertransaction.ActivityResultItem.execute (ActivityResultItem.java:49)
at android.app.servertransaction.TransactionExecutor.executeCallbacks (TransactionExecutor.java:108)
at android.app.servertransaction.TransactionExecutor.execute (TransactionExecutor.java:68)
at android.app.ActivityThread$H.handleMessage (ActivityThread.java:2199)
at android.os.Handler.dispatchMessage (Handler.java:112)
at android.os.Looper.loop (Looper.java:216)
at android.app.ActivityThread.main (ActivityThread.java:7625)
at java.lang.reflect.Method.invoke (Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:524)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:987)
Caused by: java.lang.IllegalArgumentException:
at android.database.AbstractCursor.getColumnIndexOrThrow (AbstractCursor.java:340)
at android.database.CursorWrapper.getColumnIndexOrThrow (CursorWrapper.java:87)
at com.hiddentao.cordova.filepath.FilePath.getDataColumn (FilePath.java:215)
at com.hiddentao.cordova.filepath.FilePath.getPath (FilePath.java:410)
at com.hiddentao.cordova.filepath.FilePath.resolveNativePath (FilePath.java:103)
at com.hiddentao.cordova.filepath.FilePath.onRequestPermissionResult (FilePath.java:138)
at org.apache.cordova.CordovaInterfaceImpl.onRequestPermissionResult (CordovaInterfaceImpl.java:221)
at org.apache.cordova.CordovaActivity.onRequestPermissionsResult (CordovaActivity.java:509)
at android.app.Activity.dispatchRequestPermissionsResult (Activity.java:7951)
at android.app.Activity.dispatchActivityResult (Activity.java:7801)
at android.app.ActivityThread.deliverResults (ActivityThread.java:5071)
Ionic details:
Ionic CLI : 5.4.16 (C:\Users\2304435\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.2
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
Android SDK Tools : 26.1.1 (E:\Softwares\SDK\IONIC\android-sdk-windows-1.6_r1)
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
1 post - 1 participant
Version: Cordova: cordova-lib@8.1.1
Ionic: 6.10.1
Error : 1) this.slider.update is not a function
2) this.slider.slideNext is not a function
In .ts File
import { ModalController, IonSlides } from "@ionic/angular";
trainingSliderOpts = {
speed: 400,
initialSlide: 0,
preloadImages: true,
allowTouchMove: false,
};
result: any;
@ViewChild("trainingSlider", { static: true }) slider: IonSlides;
ionViewDidEnter() {
this.slider.update();
}
1 post - 1 participant
i am using @ionic-native/android-permissions plugin to show permission dialogue. i want to know that how can we determine that user has checked “Don’t ask again” on permission dialogue?
1 post - 1 participant
Question as posted on StackOverflow but without much success there …
I’m currently working on an Ionic Project that involves opening a web page from within the app. I resorted to the InAppBrowser Cordova plugin for this. Because there’s some JS going on, on the page to which you are redirected it somehow needs to be a _system browser. (It doesn’t seem to execute the JS code correctly in the _self or _blank browser).
I read there were some issues with the eventHandlers getting lost on the system browser but couldn’t find any recent solutions for closing the system browser and returning to the application on a specific event (loadstop for example).
The code in itself is pretty simple and self-explanatory. The problem is that it doesn’t seem to bind to the ‘loadstop’ event. The other issue is that the ‘close’ method also doesn’t seem to work for the system browser.
Does anyone have a recent solution for this? I added a snippet of the code bellow:
printLabel(): void {
// labelUrl is a property on article that contains the url to redirect to (this is present and works)
const browser = this.iab.create(this.article.labelUrl, '_system');
// the JS script makes sure the label is printed so once the page is loaded it should close and return to the application
browser.on('loadstop').subscribe(() => {
browser.close();
});
}
1 post - 1 participant
in app.component.ts my function to get root page is
getFirstPage() {
this.storage.get('welcome').then(done => {
if (!done) {
this.navCtrl.navigateRoot('WelcomePage');
//this.rootPage = 'WelcomePage';
//this.nav.setRoot(WelcomePage);
} else {
this.auth.check().then(isLogged => {
if (!isLogged) {
this.navCtrl.navigateRoot('WelcomePage');
//this.rootPage = 'LoginPage';
//this.nav.setRoot(LoginPage);
} else {
this.navCtrl.navigateRoot('AccountPage');
//this.rootPage = 'AccountPage';
//this.nav.setRoot(AccountPage);
}
});
}
});
}
my app-routing.module.ts is:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
const routes: Routes = [
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
{ path: 'home',
loadChildren: () => import('../pages/home/home.module' ).then( m => m.HomePageModule) },
{ path: 'about',
loadChildren: () => import('../pages/about/about.module' ).then( m => m.AboutPageModule) },
{ path: 'account',
loadChildren: () => import('../pages/account/account.module' ).then( m => m.AccountPageModule) },
{ path: 'account-value-detail',
loadChildren: () => import('../pages/account-value-detail/account-value-detail.module' ).then( m => m.AccountValueDetailPageModule) },
{ path: 'add-account',
loadChildren: () => import('../pages/add-account/add-account.module' ).then( m => m.AddAccountPageModule) },
{ path: 'add-product',
loadChildren: () => import('../pages/add-product/add-product.module' ).then( m => m.AddProductPageModule) },
{ path: 'bank-draft-config',
loadChildren: () => import('../pages/bank-draft-config/bank-draft-config.module' ).then( m => m.BankDraftConfigPageModule) },
{ path: 'bank-draft-detail',
loadChildren: () => import('../pages/bank-draft-detail/bank-draft-detail.module' ).then( m => m.BankDraftDetailPageModule) },
{ path: 'bug',
loadChildren: () => import('../pages/bug/bug.module' ).then( m => m.BugPageModule) },
{ path: 'cart',
loadChildren: () => import('../pages/cart/cart.module' ).then( m => m.CartPageModule) },
{ path: 'checkout',
loadChildren: () => import('../pages/checkout/checkout.module' ).then( m => m.CheckoutPageModule) },
{ path: 'contact',
loadChildren: () => import('../pages/contact/contact.module' ).then( m => m.ContactPageModule) },
{ path: 'donate',
loadChildren: () => import('../pages/donate/donate.module' ).then( m => m.DonatePageModule) },
{ path: 'edit-product',
loadChildren: () => import('../pages/edit-product/edit-product.module' ).then( m => m.EditProductPageModule) },
{ path: 'help',
loadChildren: () => import('../pages/help/help.module' ).then( m => m.HelpPageModule) },
{ path: 'invite-friends',
loadChildren: () => import('../pages/invite-friends/invite-friends.module' ).then( m => m.InviteFriendsPageModule) },
{ path: 'language',
loadChildren: () => import('../pages/language/language.module' ).then( m => m.LanguagePageModule) },
{ path: 'login',
loadChildren: () => import('../pages/login/login.module' ).then( m => m.LoginPageModule) },
{ path: 'my-products',
loadChildren: () => import('../pages/my-products/my-products.module' ).then( m => m.MyProductsPageModule) },
{ path: 'my-sales',
loadChildren: () => import('../pages/my-sales/my-sales.module' ).then( m => m.MySalesPageModule) },
{ path: 'my-sales-detail',
loadChildren: () => import('../pages/my-sales-detail/my-sales-detail.module' ).then( m => m.MySalesDetailPageModule) },
{ path: 'my-shopping',
loadChildren: () => import('../pages/my-shopping/my-shopping.module' ).then( m => m.MyShoppingPageModule) },
{ path: 'my-shoppings-detail',
loadChildren: () => import('../pages/my-shoppings-detail/my-shoppings-detail.module' ).then( m => m.MyShoppingsDetailPageModule) },
{ path: 'my-shoppings-map',
loadChildren: () => import('../pages/my-shoppings-map/my-shoppings-map.module' ).then( m => m.MyShoppingsMapPageModule) },
{ path: 'payout',
loadChildren: () => import('../pages/payout/payout.module' ).then( m => m.PayoutPageModule) },
{ path: 'posts',
loadChildren: () => import('../pages/posts/posts.module' ).then( m => m.PostsPageModule) },
{ path: 'post-show',
loadChildren: () => import('../pages/post-show/post-show.module' ).then( m => m.PostShowPageModule) },
{ path: 'privacy',
loadChildren: () => import('../pages/privacy/privacy.module' ).then( m => m.PrivacyPageModule) },
{ path: 'product-list-filter-options',
loadChildren: () => import('../pages/product-list-filter-options/product-list-filter-options.module' ).then( m => m.ProductListFilterOptionsPageModule) },
{ path: 'product-map-list-filter-options',
loadChildren: () => import('../pages/product-map-list-filter-options/product-map-list-filter-options.module' ).then( m => m.ProductMapListFilterOptionsPageModule) },
{ path: 'products-list',
loadChildren: () => import('../pages/products-list/products-list.module' ).then( m => m.ProductsListPageModule) },
{ path: 'profile',
loadChildren: () => import('../pages/profile/profile.module' ).then( m => m.ProfilePageModule) },
{ path: 'profile-bank-draft',
loadChildren: () => import('../pages/profile-bank-draft/profile-bank-draft.module' ).then( m => m.ProfileBankDraftPageModule) },
{ path: 'redeem-money',
loadChildren: () => import('../pages/redeem-money/redeem-money.module' ).then( m => m.RedeemMoneyPageModule) },
{ path: 'refund-buyer',
loadChildren: () => import('../pages/refund-buyer/refund-buyer.module' ).then( m => m.RefundBuyerPageModule) },
{ path: 'refund-seller',
loadChildren: () => import('../pages/refund-seller/refund-seller.module' ).then( m => m.RefundSellerPageModule) },
{ path: 'request-permissions',
loadChildren: () => import('../pages/request-permissions/request-permissions.module' ).then( m => m.RequestPermissionsPageModule) },
{ path: 'sale',
loadChildren: () => import('../pages/sale/sale.module' ).then( m => m.SalePageModule) },
{ path: 'settings',
loadChildren: () => import('../pages/settings/settings.module' ).then( m => m.SettingsPageModule) },
{ path: 'social-networks',
loadChildren: () => import('../pages/sociais-networks/sociais-networks.module' ).then( m => m.SociaisNetworksPageModule) },
{ path: 'terms',
loadChildren: () => import('../pages/terms/terms.module' ).then( m => m.TermsPageModule) },
{ path: 'welcome',
loadChildren: () => import('../pages/welcome/welcome.module' ).then( m => m.WelcomePageModule) }
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
my app.module.ts is:
import {NgModule, APP_INITIALIZER, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';
import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {AppComponent} from './app.component';
import {IonicStorageModule, Storage} from '@ionic/storage';
import {environment} from '../environments/environment';
import {Globalization} from '@ionic-native/globalization/ngx';
import {GoogleAnalytics} from '@ionic-native/google-analytics/ngx';
import {Geolocation} from '@ionic-native/geolocation/ngx';
import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
import { GoogleMaps } from '@ionic-native/google-maps/ngx';
import {EmailComposer} from '@ionic-native/email-composer/ngx';
import {SocialSharing} from '@ionic-native/social-sharing/ngx';
import {Toast} from '@ionic-native/toast/ngx';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpModule, Http, XHRBackend} from '@angular/http';
import {JwtClientProvider} from '../providers/jwt-client/jwt-client';
import {FormsModule} from '@angular/forms';
import { NgxMaskModule, IConfig } from 'ngx-mask';
import { JwtHelperService, JwtModule, JWT_OPTIONS } from "@auth0/angular-jwt";
import {AuthProvider} from '../providers/auth/auth';
import { AuthService } from './auth/auth.service';
import { AuthGuardService } from './auth/auth-guard.service';
import {DefaultXHRBackendProvider} from '../providers/default-xhr-backend/default-xhr-backend';
import {RedirectorProvider} from '../providers/redirector/redirector';
import {Facebook} from '@ionic-native/facebook/ngx';
import {UserResourceProvider} from '../providers/user-resource/user-resource';
import {GooglePlus} from '@ionic-native/google-plus/ngx';
import {TwitterConnect} from '@ionic-native/twitter-connect/ngx';
import {PaymentResource} from '../providers/payment-resource/payment-resource';
import {AccountResource} from '../providers/account-resource/account-resource';
import {BankDraftResource} from '../providers/bank-draft-resource/bank-draft-resource';
import {DonationResource} from '../providers/donation-resource/donation-resource';
import {NumberFormatProvider} from '../providers/number-format/number-format';
import {WpPostsProvider} from '../providers/wp-posts/wp-posts';
import {AppConfigProvider} from '../providers/app-config/app-config';
import {Network} from '@ionic-native/network/ngx';
import {NetworkCheckProvider} from '../providers/network-check/network-check';
import {FileTransfer} from "@ionic-native/file-transfer/ngx";
import {FileChooser} from "@ionic-native/file-chooser/ngx";
import {TicketResourceProvider} from '../providers/ticket-resource/ticket-resource';
import {AccountPageModule} from "../pages/account/account.module";
import {LanguagePageModule} from "../pages/language/language.module";
import {ProductFilter, ProductResourceProvider} from '../providers/product-resource/product-resource';
import {CartProvider} from '../providers/cart/cart';
import {SaleResourceProvider} from '../providers/sale-resource/sale-resource';
import {ApiConfigurationProvider} from '../providers/api-configuration/api-configuration';
import {ProfileBankDraftResourceProvider} from '../providers/profile-bank-draft-resource/profile-bank-draft-resource';
import {ConfigurationResourceProvider} from '../providers/configuration-resource/configuration-resource';
import {BankDraftConfigResourceProvider} from '../providers/bank-draft-config-resource/bank-draft-config-resource';
import {AgmCoreModule} from '@agm/core';
import {GeocodingApiProvider} from '../providers/geocoding-api/geocoding-api';
import {RefundResourceProvider} from '../providers/refund-resource/refund-resource';
import {MaskNumber} from "../models/mask-number";
import {ProductListFilterOptionsPageModule} from "../pages/product-list-filter-options/product-list-filter-options.module";
import { BanksResource } from '../providers/banks-resource/banks-resource';
import { InstitutesResourceProvider } from '../providers/institutes-resource/institutes-resource';
import { MaterialsResourceProvider } from '../providers/materials-resource/materials-resource';
import { StatesResourceProvider } from '../providers/states-resource/states-resource';
import { ProfileResourceProvider } from '../providers/profile-resource/profile-resource';
import { Device } from '@ionic-native/device/ngx';
import { ItemsResourceProvider } from '../providers/items-resource/items-resource';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
export function appInitFactory(appConfig) {
return () => appConfig.load();
}
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
// export function authHttpFactory(http, storage) {
// let authConfig = new AuthConfig({
// headerPrefix: 'Bearer',
// noJwtError: true,
// noClientCheck: true,
// tokenGetter: (function () {
// return storage.get(environment.TOKEN_NAME)
// })
// });
// return new AuthHttp(authConfig, http);
// }
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
ProductListFilterOptionsPageModule,
AccountPageModule,
LanguagePageModule,
NgxMaskModule,
BrowserModule,
HttpModule,
HttpClient,
HttpParams,
HttpHeaders,
JwtHelperService,
// Jwt Token Injection
JwtModule.forRoot({
jwtOptionsProvider: {
provide: JWT_OPTIONS,
useFactory: jwtOptionsFactory,
deps: [AuthService]
}
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(),
IonicStorageModule.forRoot({
driverOrder: ['localstorage']
}),
AgmCoreModule.forRoot({
apiKey: environment.GOOGLE_API_KEY
})
],
exports: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
bootstrap: [AppComponent],
entryComponents: [
AppComponent
],
providers: [
{
provide: APP_INITIALIZER,
deps: [AppConfigProvider],
useFactory: appInitFactory,
multi: true
},
AuthService,
AuthGuardService,
StatusBar,
SplashScreen,
Globalization,
GoogleAnalytics,
GooglePlus,
TwitterConnect,
SocialSharing,
EmailComposer,
Toast,
Facebook,
Geolocation,
NativeGeocoder,
GoogleMaps,
Device,
AuthProvider,
RedirectorProvider,
UserResourceProvider,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
{provide: XHRBackend, useClass: DefaultXHRBackendProvider},
RedirectorProvider,
UserResourceProvider,
PaymentResource,
AccountResource,
BankDraftResource,
DonationResource,
NumberFormatProvider,
WpPostsProvider,
AppConfigProvider,
Network,
NetworkCheckProvider,
FileTransfer,
FileChooser,
TicketResourceProvider,
ProductResourceProvider,
ProductFilter,
CartProvider,
SaleResourceProvider,
ApiConfigurationProvider,
ProfileBankDraftResourceProvider,
ConfigurationResourceProvider,
BankDraftConfigResourceProvider,
GeocodingApiProvider,
RefundResourceProvider,
MaskNumber,
BanksResource,
InstitutesResourceProvider,
MaterialsResourceProvider,
StatesResourceProvider,
StatesResourceProvider,
ProfileResourceProvider,
MaterialsResourceProvider,
ItemsResourceProvider
]
})
export class AppModule {
}
// constructor(globalization: Globalization) {
// globalization.getPreferredLanguage()
// .then(res => console.log(res))
// .catch(e => console.log(e));
// globalization.getLocaleName()
// .then(res => console.log(res))
// .catch(e => console.log(e));
// }
export function jwtOptionsFactory(authService) {
return {
tokenGetter: () => {
return authService.getToken();
},
}
}
someone can help, ionic serve not return anything, only blank page without erros
my ionic info:
ionic info
Ionic:
Ionic CLI : 6.11.8 (C:\Users\Fred\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 5.3.2
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.1.1
@angular/cli : 10.1.1
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.0
@capacitor/core : 2.2.0
Utility:
cordova-res : 0.15.1
native-run : 1.0.0
System:
NodeJS : v12.18.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.8
OS : Windows 10
1 post - 1 participant
my welcome.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, IonSlides } from '@ionic/angular';
@Component({
selector: 'page-welcome',
templateUrl: 'welcome.page.html',
styleUrls: ['welcome.page.scss'],
})
export class WelcomePage implements OnInit {
welcomeSlides = [];
sliderConfig = {
initialSlide: 1,
speed: 400,
centeredSlides: true
};
welcomeSlidesData = [
{
title: "Ajude o meio ambiente",
description: "<b>Seja consciente</b> e descarte corretamente os seus resíduos recicláveis.",
image: "assets/img/slides/slide-1.png",
},
{
title: "Apoie a comunidade",
description: "<b>Ajude</b> os coletores, cooperativas e entidades beneficentes.",
image: "assets/img/slides/slide-2.png",
},
{
title: "É fácil e rápido",
description: "<b>Faça seu cadastro</b> e encontre coletores ou pontos de coleta mais próximos.",
image: "assets/img/slides/slide-3.png",
}
];
constructor(public navCtrl: NavController, public navParams: NavParams, public slides: IonSlides) {
}
ngOnInit() {
this.welcomeSlides = this.getSlides();
}
getSlides() {
return this.welcomeSlidesData;
}
slideNext(){
this.slides.slideNext();
}
slidePrev(){
this.slides.slidePrev();
}
ionViewDidLoad() {
console.log('ionViewDidLoad WelcomePage');
}
}
my welcome.page.html
<ion-header>
</ion-header>
<ion-content>
<ion-button>
<ion-slides #WelcomeSlides pager="true" [options]="sliderConfig" (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let slide of welcomeSlides">
<ion-toolbar>
<ion-buttons end>
<ion-button color="secondary" navPush="RequestPermissionsPage">Pular</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
<ion-button outline color="secondary" routerLink="slideNext()">
Próximo
</button>
</ion-slide>
<ion-slide>
<ion-toolbar>
<ion-buttons end>
<ion-button clear icon-end color="secondary" navPush="RequestPermissionsPage">
Continuar
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<img src="assets/img/slides/slide-4.png" class="slide-image"/>
<h2 class="slide-title">Conheça mais</h2>
<p><b>Faça seu cadastro,</b> descarte e doe para coletores, cooperativas e ONGs.</p>
<ion-button outline color="secondary" navPush="RequestPermissionsPage">
Começar agora
</button>
</ion-slide>
</ion-slides>
</ion-button>
</ion-content>
how to fix to build successfull
2 posts - 2 participants
Hello… I am trying to make my ion-content not scrollable, and I did it by doing this on my CSS file:
ion-content {
--overflow: hidden;
}
but then, I tried to make the lines of an ion-grid scrollable and I can’t do it, I did it this way:
.content-grid {
overflow-y: scroll !important;
}
Could you guys please tell me what am I doing wrong?
Thank you for your attention
1 post - 1 participant
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
Hi folks,
I’ve perused the forum but have yet to find a solution to my problem.
My Ionic Capacitor app works fine in the iOS simulator, but does not run on device. This is my first time running it on device, I somewhat suspect it has something to do with iOS 14. Here are the native logs:
Loading network plugin
2020-09-22 09:46:52.678822-0700 App[4078:1662293] CAPKeyboard: resize mode - native
⚡️ Loading app at http://localhost:8100...
2020-09-22 09:46:52.741822-0700 App[4078:1662293] WF: === Starting WebFilter logging for process App
2020-09-22 09:46:52.741864-0700 App[4078:1662293] WF: _userSettingsForUser mobile: {
filterBlacklist = (
);
filterWhitelist = (
);
restrictWeb = 1;
useContentFilter = 0;
useContentFilterOverrides = 0;
whitelistEnabled = 0;
}
2020-09-22 09:46:52.741904-0700 App[4078:1662293] WF: _WebFilterIsActive returning: NO
APP ACTIVE
Reachable via WiFi
2020-09-22 09:46:52.886451-0700 App[4078:1662293] [Process] 0x101828218 - [pageProxyID=6, webPageID=7, PID=4079] WebPageProxy::didFailProvisionalLoadForFrame: frameID = 3, domain = NSURLErrorDomain, code = -1004
⚡️ WebView failed provisional navigation
⚡️ Error: Could not connect to the server.
Has anyone else run into this issue?
Ionic info:
$ ionic info
Ionic:
Ionic CLI : 6.11.8 (/path/to/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.3
@angular-devkit/build-angular : 0.803.29
@angular-devkit/schematics : 8.3.29
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.1
@capacitor/core : 2.4.1
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v14.11.0 (/Users/justincano/.nvm/versions/node/v14.11.0/bin/node)
npm : 6.14.8
OS : macOS Catalina
1 post - 1 participant
hi , i’m using ionic 4 google native maps and i need to make markers like this , any one can help ?
that’s my code :
goToMyLocation() {
this.map.clear();
this.map
.getMyLocation()
.then((location: MyLocation) => {
const markers = [
{
title: 'Giza',
snippet: 'This plugin is awesome!',
position: {
lat: 29.0049333,
lng: 28.5038869,
},
animation: GoogleMapsAnimation.BOUNCE,
},
{
title: 'Alexandria',
snippet: 'This plugin is awesome2!',
position: {
lat: 30.7974665,
lng: 29.1907279,
},
animation: GoogleMapsAnimation.BOUNCE,
},
{
title: 'Aswan',
snippet: 'This plugin is awesome2!',
position: {
lat: 24.0923728,
lng: 32.8825537,
},
animation: GoogleMapsAnimation.BOUNCE,
},
];
for (let index = 0; index < markers.length; index++) {
const element = markers[index];
let marker: Marker = this.map.addMarkerSync({
title: element.title,
position: element.position,
animation: GoogleMapsAnimation.DROP,
});
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
// this.showToast('clicked!');
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe((data) => {
console.log('Click MAP', data);
});
}
})
.catch((err) => {
});
}
1 post - 1 participant
Hello guys,
I’m using Ionic 5, React, Capacitor and Keycloak auth system in my project. But I have a problem with using Keycloak in native platform as Android or iOS because Keycloak works for me only for web applications. Does anyone have experience with this integration or any implementation example for native apps?
Thank you so much.
James
1 post - 1 participant
Hi i want to create actionsheet like this but with 1000 number of button. how can i use loop iteration for text value in buttons…instead of create 1000 button and set text:1-1000
thanks so much
1 post - 1 participant
Hi, iam trying to use m3s Sm15 device which has laser scanner with my app. Is there any plugin, so that i can use this integrated laser scanner instead of default mobile camera?
Has anyone experience with this M3 device?
1 post - 1 participant
Hello everyone, i would like your assistance with my ionic application. i am trying to put tabs for easy navigation, after placing the tabs on my home page, they display, however, when i try to modify the routing module for the tabs on the home page, they dont display.
Attached are the screenshots for the HTML page of the application
the Routing Module and The output
1 post - 1 participant
I’m new to Ionic 4 and I got the problem that all kinds of popups are not showing, first I thought it were only that I did something wrong in the code of my Modals and Popovers but now I realized that even the Popup for ion-select is not showing. I can post all my code if needed. Would be awesome if someone knows a solution.
1 post - 1 participant
