i've got a long issue with ionic. I tried to run through an emulator but all i got is a blank screen. Even with the default tabs app you get with ionic start
I've seen few answers talking about the capacitor config file but mine look like this.
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'test-ios',
webDir: 'www',
bundledWebRuntime: false
};
export default config;
with webDirpointing to wwwlike it seems to be good for many people.
Related
I have tried previewanyfile cordova plugin to open files from external url's in Ionic 5 application. It works well with android but on IOS I noticed sometimes it doesnt preview/open PDF files. Just a grey screen with the file name on it. But strangely some PDF files open.
file preview screen
previewProductDocument(url: string) {
const loading = await this.loadingController.create({
message: 'Loading document...',
});
loading.present().then(() => {
this.previewAnyFile.preview(url).then((res) => {
loading.dismiss();
}).catch((err) => {
loading.dismiss();
this.presentToast('Error previewing the document try later', 'danger');
});
});
}
This is the plugin I have used
https://ionicframework.com/docs/native/preview-any-file
capacitor version "#capacitor/core": "^2.2.0",
Noticed this behavior only in IOS simulator + on Real IOS device.
Any idea what is going on here?
Special character (%2F) in the link is the cause of the issue.
For a quick win; either change the link or sanitise before processing.
In this case url.replace('%2F', '/') should work.
However, another link may, probably, contain a different character. Without being 100% sure, it worth a try decodeURI, which is decodeURI(url).
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
Coming from web development background, I am learning application development with Electron.
With the basic code I made a honest mistake of using submenu instead of subMenu, I would have expected an error somewhere but the file menu was not clickable at all.
As this is my side/hobby project didn't spend a lot of time to fix it. Next day noticed and fixed this.
I would like to understand on how to debug these kind of issues properly, my code was:
// mainWindow.loadURL('URL');
// also tried opening chrome dev tools
mainWindow.webContents.openDevTools();
// create menu template
const mainMenuTemplate = [
{
label: "File",
subMenu: [
{
label: "Add Item"
}
]
}
];
// Build menu from template
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
// insert menu
Menu.setApplicationMenu(mainMenu);
What I had tried is to open dev tools mainWindow.webContents.openDevTools();, even with this there was no error on console.
Please share some thoughts.
Added: Source code of my main.js from github repo.
I am trying to build my hello app (works on a web browser) for mobile platforms. I ran the command 'meteor build ../mobile/hello --server=localhost:3000' on the terminal. The build process for Android was successful but not for iOS.
Does anyone know what the issue could be?
Error:
=> Errors executing Cordova commands:
While preparing Cordova project for platform iOS:
Error: ENOENT: no such file or directory, open
'/Users/John/apps/hello/.meteor/local/cordova-build/platforms/ios/hello.xcodeproj/project.pbxproj'
I searched on google and some suggest it could be an issue with mobile-config.js file. I already checked that file and it seems ok.
// This section sets up some basic app metadata, the entire section is optional.
App.info({
id: 'com.example.hello',
name: 'hello',
description: 'hello',
author: 'John',
email: 'contact#example.com',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/phone.png',
'iphone_2x': 'icons/phone2.png'
// More screen sizes and platforms...
});
App.launchScreens({
'iphone': 'splash/anotherPhone.png',
'iphone_2x': 'splash/anotherPhone2.png'
// More screen sizes and platforms...
});
// Set PhoneGap/Cordova preferences.
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');
// Pass preferences for a particular PhoneGap/Cordova plugin.
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
// Add custom tags for a particular PhoneGap/Cordova plugin to the end of the
// generated config.xml. 'Universal Links' is shown as an example here.
App.appendToConfig(`
<universal-links>
<host name="localhost:3000" />
</universal-links>
`);
Delete from your project the folder /.meteor/local
launch Meteor again
Warning: you will loose your DataBase (it is located inside the local folder)
Tks #ghybs for the solution. I encountered the same issue and worked perfectly fine for me.
I am getting a whitelist error when running my app on the iOS simulator. This is my mobile-config.js file which is located in client/js/mobile-config.js
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: 'contact#example.com',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/icon-60#2x.png',
// ... more screen sizes and platforms ...
});
App.launchScreens({
'iphone': 'splash/Default~iphone.png',
'iphone_2x': 'splash/Default#2x~iphone.png',
// ... more screen sizes and platforms ...
});
App.accessRule('*');
But the access rule doesn't update cordova's automatically generated config.xml file with the new accessRule.
UPDATE:
I moved the config-mobile.js to the root directory of my meteor project. Now the config.xml is being updated with the "*" access rule. BUT I still get a whitelist rejection error in the simulator. Please help!
Try adding access rules only as needed:
App.accessRule('https://*.cloudfront.net/*');
App.accessRule('https://pbs.twimg.com/*');
Also prefer using of https over http.