Originally published at: Building React and Angular Component Libraries with Stencil and Nx - Ionic Blog
One of the greatest advantages of using Stencil to build a design system is that Stencil components are compatible with multiple different frontend frameworks. This means that you can write one core component library with Stencil and generate multiple component libraries for different frameworks based on that core. These components can then be consumed by…
1 post - 1 participant
[14:10:22]: Invalid application specific password provided
[!] Invalid application specific password provided
how do i set FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD ?
it’s currently a protected environment variable
failed build: Ionic Dashboard
successful build: Ionic Dashboard
1 post - 1 participant
I have an Ionic 4 application (can’t quite update yet), where I am having HUGE problems on iOS where I am using ion-slider containing components, some with 1ion-input`.
As soon as I trigger the keyboard via the ion-input, the css layout get completely messed up (in all slides).
I have tried absolutely everything, and the only we I have been able to “refresh it” is when running in debug, and using Safari dev tools, turning off and on some of the css.
It is ion-slides causing this, as I removed all but the first slide and put into just a div, and had no problems. But I need a slider (I have 3 components).
I was hoping then to try and use Slider.js (which is now going to replace ion-slider anyway), however, as in this post, I get a `‘swiper’ is not a known element error.
I can’t see any doco on what version of swiper to use to Angular8 (if I can at all)
So, my question is, can I use Swiper.js ion Ionic 4? I need the most basic functionality, ie just the sliding, and the dots at the bottom.
Thanks in advance
1 post - 1 participant
Hi, When I am selecting an option from the dropdown I need to pass more than one value of selected option.
My HTML file.
<select (change)="mes(sell.id,$event)">
<option *ngFor="let m of sell.mesure" [value]="m">{{m.name}}</option>
</select>
The (sell.mesure) has below data inside.
{
"id": "95c38c",
"name": "T3 Racer M",
"price": 1100,
"quant": 1,
"nija_id": "9544",
"mesure": [
{
"id": "9544",
"name": "pc",
"count": 1
},
{
"id": "95f2f",
"name": "box",
"count": 10
}
]
}
the above code result log is [object Object].
Thanks in advance
1 post - 1 participant
Hi every one,
We are using NUXT js with capacitor and we have followed the installation of deep linking that is recommended by the CAPACITOR Guide: Capacitor: Capacitor - build cross platform apps with the web
The redirect works when we use an Android phone however it doesn’t work when we use an Android Tablet. Both device are using Android 11.
We are facing the following issue:
Attached is a picture of the deep linking validity that we are using.
It’s working on the phone and it is NOT working from the tablet because the redirect to the App is not working.
Any recommendation why this is happing ?
In advance that you very much for your help.
Below is a piece of the code
[
{
“relation”: [“delegate_permission/common.handle_all_urls”],
“target” : {
“namespace”: “android_app”,
“package_name”: “com.golookal.app”,
“DELETED PRIVATE KEY”: [“7C:87:89:03:95:87:F5:1A:24:57:16:34:73:F5:CE:83:47:22:FF:61:60:57:9B:A8:A0:E2:10:28:9C:B8:92:F4”]
}
}
]
1 post - 1 participant
Submitting my app for review to my enterprise QA and the app doesn’t load on the ios platform. Android platform works flawlessly.
Things I’ve tried:
Package.json:
{
"name": "hc-web-employee-mobile-app-version-4",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@awesome-cordova-plugins/urbanairship": "^5.40.0",
"@ionic-native/call-number": "^5.36.0",
"@ionic-native/core": "^5.36.0",
"@ionic-native/in-app-browser": "^5.36.0",
"@ionic-native/launch-navigator": "^5.36.0",
"@ionic-native/screen-orientation": "^5.36.0",
"@ionic-native/splash-screen": "^5.36.0",
"@ionic-native/status-bar": "^5.36.0",
"@ionic/angular": "^6.0.12",
"@ionic/cordova-builders": "^6.1.0",
"@ionic/storage": "^3.0.6",
"@ionic/storage-angular": "^3.0.6",
"chart.js": "^2.9.4",
"cordova-plugin-browser": "2.0.0",
"cordova-support-android-plugin": "1.0.2",
"ionicons": "^6.0.1",
"rxjs": "~6.6.0",
"rxjs-compat": "^6.6.7",
"rxjs-tslint": "^0.1.8",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^6.1.0",
"@ionic/lab": "3.2.10",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.20.37",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"browser": "^0.2.6",
"call-number": "^1.0.1",
"cordova-android": "^10.1.1",
"cordova-browser": "^6.0.0",
"cordova-common": "4.0.2",
"cordova-ios": "^6.2.0",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-statusbar": "^3.0.0",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^6.0.0",
"es6-promise-plugin": "^4.2.2",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"gradle": "^1.2.4",
"ionic-plugin-keyboard": "^2.2.1",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"mx.ferreyra.callnumber": "0.0.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.1.5",
"urbanairship-cordova": "^12.2.0"
},
"description": "An Ionic project",
"cordova": {
"platforms": [
"ios",
"browser",
"android"
],
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-sqlite-storage": {},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes",
"OKHTTP_VERSION": "3.+"
},
"mx.ferreyra.callnumber": {},
"call-number": {},
"cordova-plugin-datepicker": {},
"cordova-plugin-screen-orientation": {},
"urbanairship-cordova": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-browser": {
"ANDROIDX_BROWSER_VERSION": "1.0.+"
},
"cordova-plugin-statusbar": {}
}
}
}
What else could I try?
1 post - 1 participant
Hi All. Has anyone faced this issue running ionic cap sync? As you can see in the pic it happens at sync time, the build is successful.
> capacitor.cmd sync
[capacitor] [fatal] Error: Cannot find module './XMLWriterBase'
[capacitor] Require stack:
[capacitor] - C:\Projects\translationApp\node_modules\xml2js\node_modules\xmlbuilder\lib\XMLStringWriter.js
[capacitor] - C:\Projects\translationApp\node_modules\xml2js\node_modules\xmlbuilder\lib\XMLDocument.js
[capacitor] - C:\Projects\translationApp\node_modules\xml2js\node_modules\xmlbuilder\lib\index.js
[capacitor] - C:\Projects\translationApp\node_modules\xml2js\lib\builder.js
[capacitor] - C:\Projects\translationApp\node_modules\xml2js\lib\xml2js.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\util\xml.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\plugin.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\android\common.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\cordova.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\tasks\copy.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\tasks\sync.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\dist\index.js
[capacitor] - C:\Projects\translationApp\node_modules\@capacitor\cli\bin\capacitor
[capacitor] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
[capacitor] at Function.Module._load (node:internal/modules/cjs/loader:778:27)
[capacitor] at Module.require (node:internal/modules/cjs/loader:1005:19)
[capacitor] at require (node:internal/modules/cjs/helpers:102:18)
[capacitor] at Object.<anonymous> (C:\Projects\translationApp\node_modules\xml2js\node_modules\xmlbuilder\lib\XMLStringWriter.js:7:19)
[capacitor] at Object.<anonymous> (C:\Projects\translationApp\node_modules\xml2js\node_modules\xmlbuilder\lib\XMLStringWriter.js:35:4)
[capacitor] at Module._compile (node:internal/modules/cjs/loader:1101:14)
[capacitor] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
[capacitor] at Module.load (node:internal/modules/cjs/loader:981:32)
[capacitor] at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
[capacitor] code: 'MODULE_NOT_FOUND',
[capacitor] requireStack: [
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\xml2js\\node_modules\\xmlbuilder\\lib\\XMLStringWriter.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\xml2js\\node_modules\\xmlbuilder\\lib\\XMLDocument.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\xml2js\\node_modules\\xmlbuilder\\lib\\index.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\xml2js\\lib\\builder.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\xml2js\\lib\\xml2js.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\util\\xml.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\plugin.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\android\\common.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\cordova.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\tasks\\copy.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\tasks\\sync.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\dist\\index.js',
[capacitor] 'C:\\Projects\\translationApp\\node_modules\\@capacitor\\cli\\bin\\capacitor'
[capacitor] ]
[capacitor] }
1 post - 1 participant
Hi,
I have an endpoint that returns an html snippet with a video tag html inside it.
When I put the code inside my application, the "Download " command does not work… But it gives me no errors, it simply does nothing.
Someone knows a workaround or a solution for this issue?
thanks
1 post - 1 participant
onClick do tab profile tem um onClick porem esse onClick não responde, alguem pode me ajudar?
reparem que tem uma div dentro desse ionTabButton, bom preciso que o menu abra quando o usuario clicar na tab profile, então fiz essa gambiarra pra funcionar, mas o IonTabButton deveria funcionar
const App: React.FC = () => {
const ref = React.useRef(null);
const dispatch = useDispatch();
const activeItem = useSelector((state: State) => state.general.menuActive);
React.useEffect(() => {
console.log(ref.current);
}, [ref]);
console.log(activeItem);
return (
<IonApp>
<Styled.GlobalApp />
<IonReactRouter history={customHistory}>
<Menu />
<IonRouterOutlet id="main-menu">
<Route path="/" exact component={LoadingPage} />
<Route path="/login" exact component={Login} />
{/* Reset Password Pages */}
<Route path="/reset-password/first-step" component={FirstStep} />
<Route path="/resetPassword/secondStep" component={SecondStep} />
{/* Panel Pages */}
<IonTabs
onIonTabsWillChange={(e) => {
console.log(e);
dispatch(setMenuActive(e.detail.tab));
}}
>
<IonRouterOutlet id="tabs">
<PrivateRoute exact path="/dashboard">
<Dashboard />
</PrivateRoute>
{/* Users do corban */}
<PrivateRoute
path="/users/list"
module={GroupModulesEnum.USERS}
exact
>
<UserList />
</PrivateRoute>
<PrivateRoute
path="/users/view"
module={GroupModulesEnum.USERS}
exact
>
<UserView />
</PrivateRoute>
<PrivateRoute
path="/users/add"
module={GroupModulesEnum.USERS}
exact
>
<UserAdd />
</PrivateRoute>
{/* Users do corban */}
{/* Customers Pages */}
<PrivateRoute path="/customers" exact>
<Customers />
</PrivateRoute>
<PrivateRoute exact path="/profile">
<Profile />
</PrivateRoute>
<PrivateRoute
path="/customers/list"
module={GroupModulesEnum.CLIENTS}
exact
>
<CustomersList />
</PrivateRoute>
<PrivateRoute
path="/customers/view"
module={GroupModulesEnum.CLIENTS}
exact
>
<CustomerView />
</PrivateRoute>
<PrivateRoute
path="/customers/add"
module={GroupModulesEnum.CLIENTS}
exact={true}
>
<CustomerAdd />
</PrivateRoute>
{/* Solicitations Pages */}
<PrivateRoute
path="/customers/:customer_uuid/requests"
module={GroupModulesEnum.CLIENTS}
exact
>
<RequestCustomerList />
</PrivateRoute>
<PrivateRoute
exact
module={GroupModulesEnum.CLIENTS}
path="/customers/:customer_uuid/requests/:request_uuid"
>
<SolicitationView />
</PrivateRoute>
<PrivateRoute
path="/customers/solicitations/add"
module={GroupModulesEnum.CLIENTS}
exact={true}
>
<SolicitationAdd />
</PrivateRoute>
<PrivateRoute
path="/customers/solicitations/recent"
module={GroupModulesEnum.PROPOSES}
exact
>
<Recent />
</PrivateRoute>
{/* Solicitations Pages */}
{/* Customers Pages */}
{/* Open Finance Pages */}
<PrivateRoute
path="/openfinance"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinance />
</PrivateRoute>
<PrivateRoute
path="/openfinance/:item_uuid/view"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceView />
</PrivateRoute>
<PrivateRoute
path="/openfinance/identity"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceIdentity />
</PrivateRoute>
<PrivateRoute
path="/openfinance/ted"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceTED />
</PrivateRoute>
<PrivateRoute
path="/openfinance/investment"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceInvestment />
</PrivateRoute>
<PrivateRoute
path="/openfinanceterm"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<Term />
</PrivateRoute>
{/* Open Finance Pages */}
{/* Digital Account Pages */}
<PrivateRoute path="/digitalaccount" exact={true}>
<DigitalAccount />
</PrivateRoute>
<PrivateRoute path="/digitalaccount/view" exact={true}>
<DigitalAccountView />
</PrivateRoute>
<PrivateRoute path="/digitalaccount/add" exact={true}>
<DigitalAccountAdd />
</PrivateRoute>
{/* Digital Account Pages */}
{/* Comission Pages */}
<PrivateRoute path="/comission/table" exact={true}>
<ComissionTable />
</PrivateRoute>
<PrivateRoute path="/comission/simulator" exact={true}>
<ComissionSimulator />
</PrivateRoute>
<PrivateRoute path="/comission/charts" exact={true}>
<ComissionCharts />
</PrivateRoute>
{/* Comission Pages */}
{/* Terms and Conditions Pages */}
<PrivateRoute path="/termsandconditions" exact={true}>
<TermsAndConditions />
</PrivateRoute>
{/* Terms and Conditions Pages */}
{/* Profile Pages */}
<PrivateRoute path="/profile" exact={true}>
<Profile />
</PrivateRoute>
<PrivateRoute path="/edit" exact={true}>
<Edit />
</PrivateRoute>
<PrivateRoute path="/experience" exact={true}>
<Experience />
</PrivateRoute>
<PrivateRoute path="/certifications" exact={true}>
<Certifications />
</PrivateRoute>
<PrivateRoute path="/contato" exact={true}>
<Contato />
</PrivateRoute>
{/* Profile Pages */}
{/* Notifications Pages */}
<PrivateRoute path="/notifications" exact={true}>
<Notifications />
</PrivateRoute>
{/* Notifications Pages */}
{/* Notifications Pages */}
<PrivateRoute path="/searchpage" exact={true}>
<SearchPage />
</PrivateRoute>
{/* Notifications Pages */}
{/* CRM Pages */}
<PrivateRoute path="/crm/kanban" exact={true}>
<BitrixKanban />
</PrivateRoute>
<PrivateRoute
path="/comments/:ID"
module={GroupModulesEnum.PROPOSES}
exact={true}
>
<Comments />
</PrivateRoute>
{/* CRM Pages */}
{/* Page de Email */}
<PrivateRoute path="/email" exact={true}>
<Email />
</PrivateRoute>
{/* Page de Email */}
</IonRouterOutlet>
<IonTabBar
slot="bottom"
id="tabBar"
selectedTab={activeItem}
onChange={(e) => {
console.log(e);
}}
itemType={'button'}
onIonTabsWillChange={(e) => console.log('e', e)}
>
<IonTabButton tab="customers" href="/customers">
<IonIcon icon={logoCustomers} style={{ width: '100%' }} />
<IonLabel>Carteira</IonLabel>
</IonTabButton>
<IonTabButton tab="crm" href="/crm/kanban">
<IonIcon icon={logoCRM} style={{ width: '100%' }} />
<IonLabel>Propostas</IonLabel>
</IonTabButton>
<IonTabButton tab="dashboard" href="/dashboard">
<IonIcon icon={logoHome} style={{ width: '100%' }} />
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton
tab="profile"
onClick={(e) => {
console.log('oi');
}}
>
<div
className="btn-profile"
onClick={async () => await menuController.open()}
>
<IonIcon icon={logoProfile} style={{ width: '100%' }} />
<IonLabel>Perfil</IonLabel>
</div>
</IonTabButton>
</IonTabBar>
</IonTabs>
{/* Panel Pages */}
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
};
1 post - 1 participant
As the title says. Android completely revamped how file access works with Android 10. With Android 10 they still gave you the option to access files the old way, but with Android 11 they removed that option, so now you have to use the new system. As far as I can tell, both Cordova and Ionic seem to have done nothing in response to this change, so at the moment there is no way to interact with Android’s file system using Ionic. It seems you can only interact with an app’s dedicated private storage, but nothing more. I just want my app to export a CSV file to the Documents folder (or perhaps a folder of the user’s choosing) on an Android user’s device and there doesnt seem to be a way to do that.
1 post - 1 participant
Get the apk from ion react banking app apk free download
Get source code from Ion React Banking - ionic 6 react banking ui theme
1 post - 1 participant
i imported an app from githup and buil it eaisly but cordova logo still exist instead of ,y logos
1 post - 1 participant
I have written several capacitor plugins for my Android Ionic app. One thing I still need to add is a plugin method to call the following Android API:
getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
The above “setFlags” API call causes the Android screen to stay awake, even if the user does not interact with the touchscreen. The reason I need this is because this is a barcode scanning application, and the user only views the screen and pulls the trigger to scan a barcode. The user doesn’t really use the screen’s touch screen while running the app. Therefore, the screen goes dark after a while. I want to keep the screen awake while the app is running because the user is viewing the data on the screen.
I’ve tried adding the above “setFlags” call to my plugin’s Android Java code. However, the Android app instantly crashes when the call is executed. None of the methods in the call chain return “null” (I’ve checked). However, if I move the same exact call to MainActivity.java (which is a file that is auto-generated by the capacitor command “npx cap add android”), then the “setFlags” call works and the screen stays awake as expected.
The problem with this solution is that it’s a customization to auto-generated code. And when we re-generate the Android app with by running “npx cap add android” again in the future, then any changes that I make to MainActivity.java are lost.
Can anyone explain why the above Java call to “setFlags” crashes if I invoke it from within my capacitor plugin?
Any suggestions on how to keep the Android screen awake from code that I can invoke from a capacitor plugin?
1 post - 1 participant
I want to change the splash screen based on the logged in user, Can I do that in Ionic ?
2 posts - 2 participants
HI im want to use ion-slide combine with ion-list with full width, but when i try it it will be look like this :
but when i see it in doc ion-slide and ion-list can be like this :
heres my code HTML
<ion-card-content class="ion-no-padding">
<ion-grid fixed class="ion-no-padding">
<ion-row>
<ion-col size="12">
<ion-slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange(slides)">
<ion-slide class="ion-no-padding ion-no-margin">
<ion-list>
<ion-item>
<ion-label>Mega Man X</ion-label>
<ion-label class="ion-text-end">20%</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
and this form ts
slideOpts = {
initialSlide: 0,
speed: 400,
pagination: false
};
am i missing something or there is alternative way ?, thank you in advance.
1 post - 1 participant
Hello!
I found in my iOS app that when I swipe left, ionic does not see the swipe.
I’ve been looking for a solution for three days, I’ve come to the conclusion that I need to activate allowsBackForwardNavigationGestures, but I don’t understand how to do it.
Please help, I’m ready to thank you 
1 post - 1 participant
My angular application has a class which detects network status:
@Injectable({
providedIn: 'root'
})
export class NetworkAutoSyncService {
protected isConnected = true;
constructor(
protected network: Network,
protected loadingController: LoadingController,
protected syncServices: SyncMasterService,
protected userParameterService: UserParametersService
) {
this.networkSubscriber();
}
networkSubscriber() {
if (this.network.type == 'none') {
this.isConnected = false;
}
this.network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
this.isConnected = false;
});
this.network.onConnect().subscribe(async () => {
if (!this.isConnected) {
this.isConnected = true;
const loading = await this.loadingController.create({
message: 'Network Connected - Sync In Progress',
});
await loading.present();
await this.syncServices.syncUserParams().then((res: any) => {
this.syncUserParameter(res.data.userParameters, res.data.flag);
});
await loading.dismiss();
}
console.log('network connected!');
setTimeout(() => {
}, 3000);
});
}
protected syncUserParameter(userParams, flag) {
console.log('sync user params');
if (flag == 'update') {
this.userParameterService.updateUser(userParams);
}
}
}
this class is declared in the app.module as networkAutoSyncService
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FormsModule],
providers: [SQLite, {
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}, Network, DatetimeConversions
// , {
// provide: ErrorHandler,
// // Attach the Sentry ErrorHandler
// useValue: SentryAngular.createErrorHandler(),
// },
],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(
protected userParamsService: UserParametersService,
protected syncServices: SyncMasterService,
public networkAutoSyncService: NetworkAutoSyncService
) {
}
}
Now when network is reconnected this code runs from above:
await this.syncServices.syncUserParams().then((res: any) => {
this.syncUserParameter(res.data.userParameters, res.data.flag);
});
which calls syncUserParams() in this sync master services class:
@Injectable({
providedIn: 'root'
})
export class SyncMasterService {
protected endpoint;
constructor(
protected network: Network,
protected userParamsService: UserParametersService,
protected getUserCreds: GetUserCredsServiceService,
) {
this.endpoint = environment.syncendpoint;
}
public async syncUserParams(): Promise<AxiosResponse<any> | void> {
const token: string = await this.getUserCreds.getStoredToken();
const userUUID: string = await this.getUserCreds.getStoredUuid();
try {
console.log('Here we break');
this.userParamsService.getUserParameters(userUUID).then(data => {
console.log(JSON.stringify(data));
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post.Authorization = token;
const url = this.endpoint;
return axios.post(url, {
data
}).then((response) => {
if (response.data.status == 'success') {
return response;
}
});
});
} catch (e) {
}
return;
}
}
As see the above the syncUserParams function is called which calls getUserParameters() in the below class. However error happenes after console.log(‘Here we break’); when we call getUserParameters with this error
Unhandled Promise rejection: Cannot read properties of undefined (reading 'data')
function inside the dbservice class (We do not reach inside this function)
@Injectable({
providedIn: 'root'
})
export class UserParametersService {
readonly dbName: string = 'global.db';
readonly dbTable: string = 'userParametersTable';
protected dbInstance: SQLiteObject;
constructor(
protected platform: Platform,
protected sqlite: SQLite,
protected globalDbFunctions: GlobalDBFunctionsService,
protected syncServices: SyncMasterService
) {
this.databaseConn();
}
/**
*
* @param uuid
*/
public getUserParameters(uuid) {
console.log('this does not output so this function does not get
called properly');
return this.dbInstance.executeSql(`SELECT * from ${this.dbTable} where uuid = ?`, [uuid])
.then((res) => {
if (res.rows.length == 1) {
return res.rows.item(0);
}
return false;
}).catch(e => {
console.log(JSON.stringify(e));
});
}
}
Wondering how I can solve this
Thanks
The full error:
E/Capacitor/Console: File: http://localhost/polyfills.js - Line 1115 - Msg: Unhandled Promise rejection: Cannot read properties of undefined (reading 'data') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'data') TypeError: Cannot read properties of undefined (reading 'data')
at http://localhost/main.js:2495:48
at ZoneDelegate.invoke (http://localhost/polyfills.js:413:30)
at Zone.run (http://localhost/polyfills.js:173:47)
at http://localhost/polyfills.js:1331:38
at ZoneDelegate.invokeTask (http://localhost/polyfills.js:447:35)
at Zone.runTask (http://localhost/polyfills.js:218:51)
at drainMicroTaskQueue (http://localhost/polyfills.js:633:39)
2 posts - 2 participants
I know this is a common issue, but I’ve followed the steps provided in past threads and I cannot get this warning to go away. I actually have a LOT of these warnings and I believe I’ve imported everything fine. So what’s going on?
Below is one of the starter templates I began customizing.
<template>
<ion-app>
<ion-split-pane content-id="main-content">
<ion-menu content-id="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Hello Jonathan 👋</ion-list-header>
<ion-note>demo@tcgsniper.com</ion-note>
<ion-menu-toggle
auto-hide="false"
v-for="(p, i) in appPages"
:key="i"
>
<ion-item
button
@click="selectedIndex = i"
router-direction="root"
:router-link="p.url"
lines="none"
detail="false"
class="hydrated"
:class="{ selected: selectedIndex === i }"
>
<ion-icon
slot="start"
:ios="p.iosIcon"
:md="p.mdIcon"
></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list id="labels-list">
<ion-list-header>Need help?</ion-list-header>
<ion-item
button
v-for="(label, index) in helpLabels"
@click="selectedIndex = i"
:router-link="label.url"
lines="none"
:key="index"
>
<ion-icon
slot="start"
:ios="label.iosIcon"
:md="label.mdIcon"
></ion-icon>
<ion-label>{{ label.title }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
</template>
<script lang="ts">
import {
IonApp,
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
IonRouterOutlet,
IonSplitPane,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";
import {
speedometerOutline,
speedometerSharp,
alertOutline,
alertSharp,
settingsOutline,
settingsSharp,
archiveOutline,
archiveSharp,
bookmarkOutline,
bookmarkSharp,
heartOutline,
heartSharp,
mail,
mailSharp,
link,
linkSharp,
paperPlaneOutline,
paperPlaneSharp,
trashOutline,
trashSharp,
warningOutline,
warningSharp,
} from "ionicons/icons";
export default defineComponent({
name: "App",
components: {
IonApp,
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
IonRouterOutlet,
IonSplitPane,
},
setup() {
const selectedIndex = ref(0);
const appPages = [
{
title: "Dashboard",
url: "/dashboard",
iosIcon: speedometerOutline,
mdIcon: speedometerSharp,
},
{
title: "Create Alert",
url: "/alert",
iosIcon: alertOutline,
mdIcon: alertSharp,
},
{
title: "Account Settings",
url: "/settings",
iosIcon: settingsOutline,
mdIcon: settingsSharp,
},
];
const helpLabels = [
{
title: "How do I create a price alert?",
url: "https://tcgsniper.com/help/how-to-create-a-price-alert-for-tcgplayer-com/",
iosIcon: link,
mdIcon: linkSharp,
},
{
title: "help@tcgsniper.com",
url: "mailto:help@tcgsniper",
iosIcon: mail,
mdIcon: mailSharp,
},
{
title: "Help Center",
url: "https://tcgsniper.com/help/",
iosIcon: link,
mdIcon: linkSharp,
},
];
const path = window.location.pathname.split("/")[1];
if (path !== undefined) {
selectedIndex.value = appPages.findIndex(
(page) => page.title.toLowerCase() === path.toLowerCase()
);
}
const route = useRoute();
return {
selectedIndex,
appPages,
helpLabels,
archiveOutline,
archiveSharp,
bookmarkOutline,
bookmarkSharp,
heartOutline,
heartSharp,
mailSharp,
paperPlaneOutline,
paperPlaneSharp,
trashOutline,
trashSharp,
warningOutline,
warningSharp,
isSelected: (url: string) => (url === route.path ? "selected" : ""),
};
},
});
</script>
<style scoped>
ion-menu ion-content {
--background: var(--ion-item-background, var(--ion-background-color, #fff));
}
ion-menu.md ion-content {
--padding-start: 8px;
--padding-end: 8px;
--padding-top: 20px;
--padding-bottom: 20px;
}
ion-menu.md ion-list {
padding: 20px 0;
}
ion-menu.md ion-note {
margin-bottom: 30px;
}
ion-menu.md ion-list-header,
ion-menu.md ion-note {
padding-left: 10px;
}
ion-menu.md ion-list#inbox-list {
border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
}
ion-menu.md ion-list#inbox-list ion-list-header {
font-size: 22px;
font-weight: 600;
min-height: 20px;
}
ion-menu.md ion-list#labels-list ion-list-header {
font-size: 16px;
margin-bottom: 18px;
color: #757575;
min-height: 26px;
}
ion-menu.md ion-item {
--padding-start: 10px;
--padding-end: 10px;
border-radius: 4px;
}
ion-menu.md ion-item.selected {
--background: rgba(var(--ion-color-primary-rgb), 0.14);
}
ion-menu.md ion-item.selected ion-icon {
color: var(--ion-color-primary);
}
ion-menu.md ion-item ion-icon {
color: #616e7e;
}
ion-menu.md ion-item ion-label {
font-weight: 500;
}
ion-menu.ios ion-content {
--padding-bottom: 20px;
}
ion-menu.ios ion-list {
padding: 20px 0 0 0;
}
ion-menu.ios ion-note {
line-height: 24px;
margin-bottom: 20px;
}
ion-menu.ios ion-item {
--padding-start: 16px;
--padding-end: 16px;
--min-height: 50px;
}
ion-menu.ios ion-item.selected ion-icon {
color: var(--ion-color-primary);
}
ion-menu.ios ion-item ion-icon {
font-size: 24px;
color: #73849a;
}
ion-menu.ios ion-list#labels-list ion-list-header {
margin-bottom: 8px;
}
ion-menu.ios ion-list-header,
ion-menu.ios ion-note {
padding-left: 16px;
padding-right: 16px;
}
ion-menu.ios ion-note {
margin-bottom: 8px;
}
ion-note {
display: inline-block;
font-size: 16px;
color: var(--ion-color-medium-shade);
}
ion-item.selected {
--color: var(--ion-color-primary);
}
</style>
1 post - 1 participant
Hi, I fetched below data from API and can’t ngFor product object, It gives NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-row' Error.
API Data:
{
"id": "5175",
"price": "4.50",
"date": "2022-04-01 17:25",
"product": [
{
"id": "95c8-73",
"name": "Product Name",
"edinica_id": "eb27549a073c",
"izmerenija": {
"id": "95-a03c",
"naimenovanie": "pc"
},
"edinicy_izmerenij": [
{
"id": "95d-e23c",
"name": "pc"
}
]
}
]
}
My *.component.html file.
<ion-row *ngFor="let item of data.product">
<ion-col>
<p>ID:</p>
<p>Name:</p>
</ion-col>
<ion-col>
<span>
{{item.id}}
</span>
<span>
{{item.name}}
</span>
</ion-col>
</ion-row>
Thanks in advance.
2 posts - 2 participants
Hi All
I am trying to integrate Tapjoy cordova plugin into my ionic(5) application.
There is no Ionic plugin, only Cordova.
How can I integrate Cordova plugin to the ionic application???
How can I develop an ionic plugin for an existing Cordova plugin?
Regards
Eve.
2 posts - 2 participants