Capital Solar is owned and operated by Solberry Energy Pvt. Ltd. Capital Solar is quickly becoming a leader in the solar industry. We are dedicated to manufacturing high-power Solar PV Modules that are both reliable and efficient. Our primary focus is on delivering exceptional performance and ensuring reliability.
1 post - 1 participant
Hello Everyone,
I am new to Ionic vuejs, I have developed an Ionic vuejs project without typescript and just js, and now I want to deploy this project to the FTP server. I did run an ionic build and can see the dist folder and inside contents of it. My question is that I am also using Tomcat which is on the same FTP server, where my Springboot backend is deployed. So, I need to understand where I should place the contents of the dist folder on the server, and if there are any changes to be done in index.html or any changes to be done in any file in the dist folder before deploying it to the server and how to access the project when deployed, can anyone share some doc or sample project sort of thing to help me understand better with the steps of deployment.
Also, I uploaded the dist folder to the server, but the website is coming as blank, I am not sure why it is causing that. Need help.
I appreciate it, thanks.
I have followed the https://www.youtube.com/watch?v=mQ4zmFy4d7Y&pp=ygULaW9uaWMgdnVlanM%3D video for the initial setup.
9 posts - 2 participants
Hi, I have a Ionic project with these Ionic and Capacitor versions:
"@capacitor/android": "^5.6.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.6.0",
"@capacitor/filesystem": "^5.2.0",
"@capacitor/haptics": "5.0.6",
"@capacitor/keyboard": "5.0.7",
"@capacitor/status-bar": "5.0.6",
"@ionic/vue": "^7.0.0",
"@ionic/vue-router": "^7.0.0",
Should I be able to use Cordova plugins? I see no compilation errors, but when I run the app in an Android device, I see the ReferenceError: cordova is not defined in the app logs.
For the record, the Cordova plugin is this: GitHub - qu-beyond/sockets-for-cordova: Cordova plugin for socket network communication
My compilation steps:
npm run build
npx cap sync
Thanks!
1 post - 1 participant
I have an application runs on cordova-ios@5.1.1. Running the app on iOS 16+, it freezes on the splash screen without any error/warning log on xcode and safari doesn’t recognize it to see the js log.
During the tests, I’ve found that the problem caused by WKWebViewEngine. If I remove it, the freezing is gone.
I’ve tried to upgrade to cordova-ios@6.x, but as the WKWebViewEngine is integrated with the lib’s core, the problem persists.
Anyone has any ideia on how to proceed?
1 post - 1 participant
A very simple question but the information I’ve found in Google seems very confusing to me. Is it possible to develop apps for Android Auto with Ionic/Angular and Capacitor?
1 post - 1 participant
Hey,
i’m using Capacitor with SvelteKit and TailwindCSS.
My problem is that the bounce-scrolling or overscrolling effect is applied to my header and bottom navigation bar. Here is a small screen recording of this issue: https://www.youtube.com/shorts/gfWTLhV2FpQ
The header and bottom nav have a “position: fixed” property.
Is there a way to disable the stretching on my header and bottom nav? This is my git repo with the full code and configs: GitHub - Fabianofski/Cooking-Cache: The ultimate collection for your recipes!
Please let me know if i can provide additional context.
Thanks!
1 post - 1 participant
Just generated a new ionic/angular app (so all is latest and greatest basically) and try to add the SMS plugin from GitHub - danielsogl/awesome-cordova-plugins: Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support. but it kicks me in the teeth with
node_modules/@awesome-cordova-plugins/sms/ngx/index.d.ts:40:22
40 export declare class SMS extends AwesomeCordovaNativePlugin {
~~~
This likely means that the library (@awesome-cordova-plugins/sms/ngx) which declares SMS is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Unfortunatelly, solutions (eg postscript: ngcc) that I browsed don’t work with latest Angular so pretty stuck.
Have you guys seen this and how to unblock myself? Alternative sms plugin also works. I need to only send sms, nothing too custom/complex.
1 post - 1 participant
Hi I would like to perform the same effect at this video.
Being able to go to a sub page with the sub page on top of his parent. (the tabs is hidden)
On my ionic 7 project, I can’t implement this effect. I got some sort of black background color showing instead of the parent page, here is my code.
setupIonicReact(
{ navAnimation: iosTransitionAnimation }
);
const Tabs = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Route exact path="/app/tab1" component={Tab1} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/app/tab1" >
<IonIcon icon={searchOutline} />
</IonTabButton>
</IonTabBar>
</IonTabs>
)
}
const Tab1: React.FC = () => {
return (
<IonPage>
<IonContent>
test tab1
<IonButton routerLink="/detailsonly" >go to detail</IonButton>
</IonContent>
</IonPage>
)
}
const Detail: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton />
</IonButtons>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
Detail page
</IonContent>
</IonPage>
)
}
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/app" component={Tabs} />
<Route path="/detailsonly" component={Detail} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
export default App;
7 posts - 2 participants
Hi all, I am currently experiencing an issue where part of my list is unable to save the input.
Firstly, I have an array named allItems, which is the combination of 2 arrays, items and newItems.
items is manually hard coded whereas newItems is retrieved from Firestore Firebase.
So for instance I type in 10 for keyboards and Ben’s Watch
What could be causing the issue?
I have a feeling that it might be caused by the retrieving of newItems array, constantly maintaining the quantity of the respective item.
Here is the code for the html portion:
1 post - 1 participant
Hello, I´ve been trying to integrate angular standalone ssr with Ionic, but the resultant code on server destroy shadow parts.
This is my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {
"@ionic/angular-toolkit:page": {
"styleext": "scss",
"standalone": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/app",
"index": "src/index.html",
"polyfills": [
"src/polyfills.ts"
],
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}],
"styles": [
"src/theme/variables.scss",
"src/global.scss"
],
"externalDependencies": ["canvas"],
"scripts": [],
"prerender": false,
"server": "src/main.server.ts",
"ssr": {
"entry": "server.ts"
}
},
"configurations": {
"production": {
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "12kb"
}
],
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}],
"styles": [
"src/theme/variables.scss",
"src/global.scss"
],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"prerender": false,
"buildTarget": "app:build:production",
"functionsRuntimeOptions": {
"memory": "128MB",
"timeoutSeconds": 10,
"maxInstances": 3,
"minInstances": 0
}
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
],
"analytics": "6f4fd7d6-33a5-491c-8a1b-1ea861963393"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
},
"@angular-eslint/schematics:application": {
"setParserOptionsProject": true
},
"@angular-eslint/schematics:library": {
"setParserOptionsProject": true
}
}
}
This is my package.json file:
{
"name": "food-journey",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"dev:ssr": "ng run app:serve-ssr",
"serve:ssr": "node dist/app/server/main.js",
"build:ssr": "ng build && ng run app:server",
"prerender": "ng run app:prerender",
"serve:ssr:tester": "node dist/app/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.1.0",
"@angular/common": "^17.1.0",
"@angular/compiler": "^17.1.0",
"@angular/core": "^17.1.0",
"@angular/fire": "^17.0.1",
"@angular/forms": "^17.1.0",
"@angular/google-maps": "^17.1.0",
"@angular/platform-browser": "^17.1.0",
"@angular/platform-browser-dynamic": "^17.1.0",
"@angular/platform-server": "^17.1.0",
"@angular/router": "^17.1.0",
"@angular/ssr": "^17.1.0",
"@capacitor-community/apple-sign-in": "^5.0.0",
"@capacitor/android": "5.6.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.6.0",
"@capacitor/geolocation": "^5.0.6",
"@capacitor/haptics": "5.0.6",
"@capacitor/ios": "5.6.0",
"@capacitor/keyboard": "5.0.7",
"@capacitor/network": "^5.0.6",
"@capacitor/preferences": "^5.0.6",
"@capacitor/splash-screen": "^5.0.6",
"@capacitor/status-bar": "^5.0.6",
"@codetrix-studio/capacitor-google-auth": "^3.3.6",
"@ionic/angular": "^7.6.5",
"@ionic/angular-server": "^7.6.3",
"express": "^4.18.2",
"ionicons": "^7.2.1",
"moment-timezone": "^0.5.44",
"ng2-pdf-viewer": "^10.0.0",
"onesignal-cordova-plugin": "^5.0.4",
"onesignal-ngx": "^2.0.1",
"rxjs": "~7.8.0",
"swiper": "^11.0.5",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.1.0",
"@angular-eslint/builder": "^17.2.0",
"@angular-eslint/eslint-plugin": "^17.2.0",
"@angular-eslint/eslint-plugin-template": "^17.2.0",
"@angular-eslint/schematics": "^17.2.0",
"@angular-eslint/template-parser": "^17.2.0",
"@angular/cli": "^17.1.0",
"@angular/compiler-cli": "^17.1.0",
"@angular/language-service": "^17.1.0",
"@capacitor/cli": "5.6.0",
"@ionic/angular-toolkit": "^9.0.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"browser-sync": "^3.0.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ts-node": "^8.3.0",
"typescript": "~5.2.2"
},
"description": "An Ionic project"
}
This is my app.config.s:
import { RouteReuseStrategy, TitleStrategy, provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { IonicRouteStrategy } from '@ionic/angular/common';
import { provideIonicAngular } from '@ionic/angular/standalone';
import { routes } from './app.routes';
import {
ScreenTrackingService,
UserTrackingService,
getAnalytics,
provideAnalytics,
} from '@angular/fire/analytics';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getPerformance, providePerformance } from '@angular/fire/performance';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { environment } from '../environments/environment';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideClientHydration } from '@angular/platform-browser';
// import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideClientHydration(),
provideIonicAngular({
mode: "ios",
backButtonText: "",
backButtonIcon: "chevron-back",
}),
// provideClientHydration(withHttpTransferCacheOptions({ includePostRequests: false })),
provideRouter(routes, withComponentInputBinding()),
provideAnimations(),
importProvidersFrom([
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAnalytics(() => getAnalytics()),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
providePerformance(() => getPerformance()),
provideStorage(() => getStorage()),
]),
provideHttpClient(),
{ provide: FIREBASE_OPTIONS, useValue: environment.firebase },
ScreenTrackingService,
UserTrackingService,
],
};
This is my app.config.server.ts:
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { appConfig } from './app.config';
import { IonicServerModule } from '@ionic/angular-server';
import { provideServerRendering } from '@angular/platform-server';
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
IonicServerModule,
]
};
export const config = mergeApplicationConfig(appConfig, serverConfig);
Please, could anyone can help me?
2 posts - 1 participant
I am in the process of updating my App from Ionic 6 to 7, and i am having some issues. I aim following this guide:
Set Up Swiper.js for Angular Slides [Example] | Ionic (ionicframework.com)
This is my code:
<ion-card>
<swiper-container class="task" pager="true">
<swiper-slide >
Step 1:<br>
Enable Bluetooth and Location on your device.
</swiper-slide >
<swiper-slide >
Step 2:<br>
Set the IoT WiFi device in Pairing Mode.
</swiper-slide >
<swiper-slide >
Step 3:<br>
Press "Connect" for avilable WiFi networks.
</swiper-slide >
<swiper-slide >
Step 4:<br>
Select the WiFi SSID or press "Scan" for an updated list.
</swiper-slide >
<swiper-slide >
Step 5:<br>
Set the WiFi security, default is WPA, for public networks select open.
</swiper-slide >
<swiper-slide >
Step 6:<br>
Set the WiFi password or keep it blank if it is not required.
</swiper-slide >
<swiper-slide >
Step 7:<br>
Press "Provision" to connect the IoT WiFi device to the selected WiFi network.
</swiper-slide >
</swiper-container>
</ion-card>
As mentioned, I have updated my app.module.ts with the following:
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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [AppComponent],
//entryComponents: [],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Then app.components.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
import { Azureservice } from './azureservice.service';
import { App } from '@capacitor/app';
import { register } from 'swiper/element/bundle';
import { Plugins } from '@capacitor/core';
register();
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
public appPages = [
{
title: 'My Account',
url: '/myaccount',
icon: 'home'
},
{
title: 'Notifications',
url: '/notification',
icon: 'notifications'
},
{
title: 'IoT Devices',
url: '/node-view',
icon: 'wifi'
},
];
public appPagesbottom = [
{
title: 'Contact us',
url: '/contactus',
icon: 'mail'
},
{
title: 'Logout',
url: '/logout',
icon: 'log-out'
},
];
Am i missing a step?
1 post - 1 participant
I noticed that when having a text input field, (textarea or other)
Using useState with value or react-hook-form to reset the input will only work one time.
Here is the stackblitz
I find a work around by setting a key to the Input, and change that key when I want to reset to re-render a new Input. However, I want to keep the focus on the input so its seems a bit complicated.
Any other way to reset the value of the input without re-rendering it ?
1 post - 1 participant
Hello everyone,
I’m encountering an issue while trying to build my Ionic project on iOS. Strangely, the project works fine on Android. The error I’m seeing is:
Error at new (/usr/local/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
at ChildProcess. (/usr/local/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
…
I have already worked on the same project in Android without any problems. I’ve tried updating the Ionic CLI, checking Node.js and npm versions, clearing caches, and reviewing my code changes, but the issue persists.
Any guidance or suggestions on how to resolve this would be greatly appreciated!
Thank you in advance.
1 post - 1 participant
Probably there is a specific reason I just miss, when I launch the build command everything is build without errors.
Some of the components are named different, probably depending by some reason i ignore:
Maybe it’s just a coincidence but some they are just component included in other components:
Since I import esm module of mds-icon.entry in storybook sice it’s expects a configuration, it breaks the build since it can’t find it anymore.
If I check the dist/components folder, I see these files are split in two, mds-icon.js basically just imports mds-icon2.js where is stored the component’s code.
The question is: why?
If this an expected behaviour, why just some component is handled like this?
Can I control this in some way, maybe from rollup config inside stencil config?
1 post - 1 participant
Forgive my ignorance, I’m a relative novice with front-end development and most of my experience is with Typescript and Vue. I’m starting with Ionic/Capacitor/Vue and have noticed some differences in the way the autocomplete works in Webstorm. The other references to this issue point to older versions of Webstorm and Ionic so they don’t seem to apply.
The problem that I’m having is that autocomplete doesn’t work at all for some ionic elements such as ion-page, but there are other elements such as ion-header that appear in the autocomplete but when I select the element in the template section, it isn’t automatically added to the import statement in the script section of the page. Is there some trick I’m missing? It all works fine when just doing straight Vue projects.
1 post - 1 participant
On device, calls to navigator.getCurrentPosition re-prompt for location permission even if @capacitor/geolocation Geolocation plugin has been granted permission.
Example: adding @capacitor/geolocation and buttons plus methods to one of the default Ionic apps
has Geolocation.requestPermissions() and Geolocation.getCurrentPosition() work as expected but navigator.geolocation.getCurrentPosition() produces a new prompt asking for permission. Closing the app and repeating the procedure produces the same behavior. Closing the app and repeating for the third time now has navigator.geolocation.getCurrentPosition() succeed without a further permission prompt.
Similar issues have been resolved by injection Platform and waiting for Platform.ready(), but that produces no change here. In our case, the navigator.geolocation.getCurrentPosition() calls are coming from a major third-party dependency, so simply removing the calls isn’t an option.
Example Repo: GitHub - rahbu/geolocation-example
Device info:
iPhone 12 Pro
iOS 17.2.1
1 post - 1 participant
Hi I’m trying to create a biometric app but im having issue using @capacitor-community/camera-preview in Ionic react v7.
import {
IonButton,
IonButtons,
IonContent,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
} from “@ionic/react”;
import { chevronBack } from “ionicons/icons”;
import React, { useEffect, useState } from “react”;
import { useParams } from “react-router”;
import { CameraPreview } from “@capacitor-community/camera-preview”;
import “…/theme/camera.scss”;
interface RouteParams {
id: any;
}
const CameraPage: React.FC = () => {
const { id } = useParams();
useEffect(() => {
startCameraPreview();
}, );
const startCameraPreview = async () => {
await CameraPreview.start({
parent: “content”,
toBack: true,
position: “front”,
height: 800,
width: 360,
disableExifHeaderStripping: false,
rotateWhenOrientationChanged: true,
lockAndroidOrientation: true,
});
};
const stopPreview = async () => {
await CameraPreview.stop();
};
const dismiss = () => {
window.location.replace(“/home”);
}
return (
<>
<IonTitle color={‘dark’}>{id}
);
};
export default CameraPage;
1 post - 1 participant
Hi folks,
I’ve scoured the web and trying to figure out how to use Stenciljs with testing library. Anybody have any insights here? I’m not using react, just stenciljs and would like to use testing-library to keep our unit tests strong. Frankly I feel underwhelmed by the type of unit tests I’m seeing written for Stencil thus far. Many thanks in advance for any help folks can provide.
1 post - 1 participant
Uncaught (in promise) cordova_not_available
This error is showing on capturing image video and recording video in Android, iOS, and browser mobile devices. Can anyone help with what the issue is about?
1 post - 1 participant
