I have been experiencing this issue since I tried run my app in a device..
I re-install the cordova-whitelist plugin.
When I try to run the app again from the browser using ionic serve command.
the app calls to the wrong API..
below is the log in my console when I try to login to the app.
POST http://192.168.43.57:8100/auth/login 404 (Not Found)
the $http url declared on my JS code is different from what the console is pointing to.
login controller
$scope.login = function() {
var credentials = {
username: $scope.loginData.username,
password: $scope.loginData.password
}
$auth.login(credentials).then(function() {
$http.get('http://api.mydomain.com/api/login')
.success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('tabs.download');
})
.error(function(){
var alertPopUp = $ionicPopup.alert({
title: 'Login Failed!',
template: 'Invalid credentials'
});
})
});
}
UPDATE:
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.ticappnew343084" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Test Mobile</name>
<description>
TIC Inspection Report Generator
</description>
<author email="user#example.com" href="http://example.com/">
Author Name
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<allow-navigation href="http://192.168.43.57:8100"/>
</widget>
after reading all my codes I finally found the solution..
it seems that I have forgot to specify the login api url to my app config..
so I added this line of code in my app.js file
.config(function($stateProvider, $urlRouterProvider, $authProvider){
$authProvider.loginUrl = 'http://api.mydomain.com/api/login'
})
then changed the url in my login function from
$http.get('http://api.mydomain.com/api/login')
to
$http.get('http://api.mydomain.com/api/user')
this api retrieves the user information from the server..
Related
I built an ionic/angular web app via ionic build, then created the android project with capacitor via
"ionic capacitor run android -l --external". I'm trying to make an http post request to a local web api.
Api's IP is 127.0.0.1:43308, while the android project is running at http://192.168.1.6:8100.
I tried many solutions online and all led me back to the same error
net::ERR_CONNECTION_REFUSED
Anyone got ideas? the project has no issues when ran through a web browser, only gives me such error when it's ran as a native application
Capacitor.config.json:
{
"appId": "com.reservation.app",
"appName": "reservation-app",
"webDir": "www",
"npmClient": "npm",
"server": {
"url": "http://192.168.1.6:8100",
"cleartext": true,
"allowNavigation":[
"localhost:8100/*"
]
}
}
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<access origin="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<feature name="CordovaHttpPlugin">
<param name="android-package" value="com.silkimen.cordovahttp.CordovaHttpPlugin"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils"/>
<param name="onload" value="true"/>
</feature>
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
<param name="onload" value="true"/>
</feature>
</widget>
EDIT:
Web API's CORs policy:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(name: AllowSpecificOrigins,
builder =>
{
builder.WithOrigins( "http://localhost:8100", "http://192.168.1.6:8100")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors(AllowSpecificOrigins);
}
Looks like a CORS issue.
Enable CORS for all request methods and from localhost ports 3000 ( http://192.168.1.6:8100 in your case) and 1056 (default for the Webpack server and VS.NET respectively)
As we require credentials sent over, we can't use 'Access-Control-Allow-Origin: *' and need to explicitly list available websites.
See brief description here or a verbose one here
To enable CORS for your entire application the line below must precede any defined endpoints in your app that you want to support cross-origin requests (ex. before any call to UseMvc).
app.UseCors(builder =>
builder.WithOrigins(["http://192.168.1.6:8100","Other Origins that need to call the backend here"])
.WithExposedHeaders(HeaderNames.ContentDisposition) // Expose the file name of downloaded files
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
Figured it out, web api IP address should be 127.0.0.1:PORT, and android's api reference IP should be 10.0.2.2:PORT (points to the pc's local server).
https://learn.microsoft.com/en-us/xamarin/cross-platform/deploy-test/connect-to-local-web-services#create-a-development-certificate
Can't connect to api endpoint from mobile app
I've been trying to add a custom splash screen to my ionic2 sidemenu project.But while I run the command "ionic serve -l" on the command prompt,I see the homepage of my app in the local host instead of a splash screen.
Procedure I followed was similar to the one described here:https://www.youtube.com/watch?v=x04rztL2eIs
Firstly I deleted the default ionic icon and the splash.png image in the resources folder along with the splash folder inside the android and ios folders.
Then i've added the .png image of my choice with specified dimensions to the resources folder.
Then I've run the command "ionic resources android --splash" and "ionic resources ios --splash" which automatically created the splash folder inside ios and android folders respectively with the image.
I've set the function "Splashscreen.show();" in app.component.ts
I even set the default value to 3000 in the config.xml file.
Upon doing all this, I ran the command "ionic serve -l" in my command prompt.But it still shows the home page of my sidemenu app rather than the splash screen.
app.component.ts file
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.show();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
config.xml file
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>V2 Test</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://ionic.local/*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
</platform>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="3000"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
<plugin name="cordova-plugin-console" spec="1.0.5"/>
<plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
<plugin name="cordova-plugin-device" spec="1.1.4"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
</widget>
I've read on the internet that we require an android emulator and ios emulator for viewing the splash screen.Is it really required ?
Please help me on how to display the custom splashscreen.
I've read on the internet that we require an android emulator and ios
emulator for viewing the splash screen.Is it really required ?
Yes. You need to run in an emulator or an actual device for the splashscreen.
Because it is actually a cordova plugin imported via Ionic Native.
Link here.
Cordova plugins in general are disabled in ionic serve as they are specifically for using features of a mobile device.
You seem to have followed all the steps. Run in an emulator and check.
According to this link in Github,
the splashscreen is automatically shown if the settings are placed in your config.xml.
You have to call Splashscreen.hide().
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
A few months back I started building a Hybrid application using Monaca IDE, now i'm trying to make some changes to it, the thing is that when I try to make a debug build to test the app it doesn't work, it doesn't even run, when it starts says "my app has to close", I didn't change the source code, I just added a few html and js files.
the index.html, the main js file and the config.xml are intact. I tested the build on android 2, 4.2 and 6, in none of them it works, I can post the necesary code that you need, right now i dont know what code I can post to help you guys!
I dont know if there's something new with the IDE i should be aware of!
here is my config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="com.example.ANTELCar" version="2.0.1">
<name>Antel Car</name>
<description>Antel Car</description>
<author/>
<content src="index.html"/>
<preference name="loglevel" value="DEBUG"/>
<preference name="AndroidLaunchMode" value="singleTop"/>
<preference name="ErrorUrl" value=""/>
<preference name="SplashScreen" value="screen"/>
<preference name="monaca:DisableCookie" value="false"/>
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<preference name="AllowInlineMediaPlayback" value="false"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="BackupWebStorage" value="cloud"/>
<preference name="EnableViewportScale" value="false"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value=".25"/>
<preference name="KeyboardDisplayRequiresUserAction" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="false"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SuppressesIncrementalRendering" value="false"/>
<preference name="TopActivityIndicator" value="gray"/>
<preference name="GapBetweenPages" value="0"/>
<preference name="PageLength" value="0"/>
<preference name="PaginationBreakingMode" value="page"/>
<preference name="PaginationMode" value="unpaginated"/>
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage"/>
</feature>
<preference name="monaca:targetFamilyiPhone" value="1"/>
<preference name="monaca:targetFamilyiPad" value="1"/>
<access origin="*"/>
<access origin="mailto:*"/>
<preference name="KeepRunning" value="false"/>
<preference name="monaca:AndroidIsPackageNameSeparate" value="true"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="Orientation" value="portrait"/>
<preference name="SplashScreenDelay" value="4000"/>
<preference name="Fullscreen" value="false"/>
<preference name="AndroidPersistentFileLocation" value="Compatibility"/>
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<allow-navigation href="*"/>
</widget>
The problem will not be in the IDE but within your file. When you upload a project to Monaca IDE, it does create a new blank config file. You need to make sure you set all of those settings and enable what you need for it to work. Also, if you are using custom plugins but are using the free account, those plugins will not be included.
To confirm a working environment, I recommend using one of their default templates such as the Onsen 2.0 example to test everything and make sure your design environment is setup and working.
Munsterlander gave you some good hints.
Also, if you are using custom plugins and you have imported them just by specifying the plugin's names, the latest version of them will be downloaded once you build your project again. This means that maybe the new version of the plugin is not compatible with your original configuration.
You can try to upgrade your project to Cordova 5.2 and build again to see if it works.
It's work OK in web browser but when I try to login via email& password I get the error :
Unable to contact the Firebase server
this is how I login :
var auth = $firebaseAuth(firebaseMainRef);
auth.$authWithPassword({ email : email, password : password })
I use: Firebase v2.0.5
this is the confif.xml file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myapp501948" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>
thanks!
Adding cordova plugin of whitelist solves the problem
This is how I'm making the call:
$http.get( url, {
params : {
empId: $scope.empId
}
}).then(function(data, status){
$scope.workOrders = data.data;
}, function(data, status){
$scope.message = data;
});
It works just fine on Chrome, and if I navigate to the URL on my phones browser I can get a response just fine.
However, whenever I use the .apk that gets built I get:
{"data":"",
"status":404,
"config":{
"method":"GET",
"transformRequest":[null],
"transformResponse":[null],
"params":{"empId":"123"},
"url":"http://...",
"headers":{"Accept":"application/json, text/plain, */*"}
},"statusText":Not Found"}
Kinda lost on this one. Just weird that I can hit the URL from my phone browser but not within the Ionic/Cordova built .apk
As requested, here is my config.xml file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myapp397384" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>
Aha!
Apparently Cordova just released cordova-android 4.0 not too long ago and it by default blocks http requests.
Just run this command:
ionic plugin add cordova-plugin-whitelist
And you're good to go.