I am using IONIC 3.20.1 and I am facing the issue, assets images are not rendering on the browser or device as well.
The folder structure is the same while creating the sample project inside the src folder then assets then imgs.
but images are not loading on the browser after the ionic serve. I tried all the paths like below.
<img float-right src="../assets/imgs/user.png" />
<img float-right src="../../assets/imgs/user.png" />
<img float-right src="/assets/imgs/user.png" />
<img float-right src="./assets/imgs/user.png" />
<img float-right src="assets/imgs/user.png" />
but nothing is working. Please help me out here.
Please check the link also.
I tried all the things like renaming name of the images, folder name change. but didn't work in case of "Ionic Serve".
After that, I Installed the Cordova Tools extension for Visual Studio
Code.
Added the configuration file. (launch.json)
And then added browser platform using the command 'ionic cordova platform add browser'
At last, debug the application with "RunBrowser" option
Now the images are rendered properly
Scrrenshot http://prntscr.com/nrw5fr
Related
I am visiting a page which has a link for a pdf file. The link opens a new tab and its content look like this:
<html>
<head></head>
<body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(38, 38, 38);">
<embed name="B4133D167D3B030DC294D8CA8F6FC5FE" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="B4133D167D3B030DC294D8CA8F6FC5FE">
</body>
</html>
Embedded is the pdf I would like to download.
The only solution I have come up so far is manually changing the default behavior in chrome://settings/content/pdfDocuments to download the PDF, but every time I restart the browser, it resets. Plus, I can't test this solution on headless mode...
I tried launching chromium with the --print-to-pdf flag found in this list, with no luck.
Does anyone know, if puppeteer can launch chromium with the "download PDF" as the default behavior, without tying it to a profile?
Does anyone know if there is another solution for puppeteer to download embedded pdfs?
Thanks.
I got to a solution that does the job for now using a chrome profile.
I created a new profile in my browser. I set the downloads directory and the default behavior for PDFs to "download PDFs".
I created a new folder somewhere for chromium to use as its data directory.
I pasted the previously created profile folder named 'Profile 2' inside the newly created folder.
Then on puppeteer I launched chromium with the following flags:
--user-data-dir=newly_created_folder
--profile-directory=Profile 2
I had to set both because when chromium first starts, it populates the user dir with its own files.
Every time the browser restarts, the file SingletonLock that sits on the 'user-data-dir' foder has to be overwritten. I ended up deleting the file before every execution of puppeteer.launch(options).
For this to work on headless mode I set the parameter headless: 'chrome' and not true.
This works on puppeteer 17 and 18. I have tested it also in versions 14,15 and 16 with no luck.
Still, if anyone knows a better solution to download embedded PDFs, please share..
Thanks
How to build browser version using Ionic 4. When I tried to build using ionic cordova build browser --prod and uploaded platforms/browser/www files on server and tried to run in browser it’s not showing anything(webpage is blank) and getting below error in devtools.
Can anyone please help me on the same?
Hi I also had this problem with my vuejs apps and it also happened with the new ionic 4 production build.
It looks like these system assume that you are going to drop the "dist" or "www" files in the home directory of your web server like in my case I was using xampp server. But we usally put these files in a sub directory like htdocs/app2.
So for this to work you need to change the <base href="/" /> in ionic 4 to <base href="/app2/" /> or what ever your app is. In vue js it's almost the same thing. but you can manually add "/app2" to the index.html file's scripts.
That worked for me; you can try it.
If you are trying to deploy the app in the server in a custom folder then you need to change the <base href="/" /> to <base href="/custom_folder_name/" /> in the index.html file in your project.
Try this change in index.html base.
Before: href="/" />
After: <base href="./"
it changed in the last version. This works for me:
ionic build --prod --public-url=/app/
I had the same problem, my solution was to upgrade xampp version to latest.
Try ionic build --prod.. The www folder has everything you need for a website.
Given that the Visual Studio Code is based on Chrome web kit
Could we open the preview inside the editor as a panel ?
According to this page, this feature is highly requested !
Well for now, based on Dan Shryock's answer here and this post, here is what I did:
Install nodejs then live-server npm install -g live-server
Run live-server at the project folder
Create a live-view.md file with this in it (Place it wherever you want. I put it at the base folder of all my projects since I can use it for whatever I'm currently working on):
<div style="border:1px solid #777;position:absolute;left:10px;top:10px;bottom:10px;right:10px;">
<iframe src="http://localhost:8080/"; width="100%" height="100%" frameborder="0" />
</div>
Open live-view.md in the second/split pane in VS Code and click the "Open preview" button (top right of file).
Now whenever I save I see the changes show in the live-preview.
For the moment, here how i solve it :
Editing the file
C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\parts\
markdown\browser\resources\welcome-mac.md
with super-admin rights, and adding
<input type="text" value="http://127.0.0.1:8080/" id="preview" onkeydown="var k = event.which; if (k==8) this.value = this.value.slice(0, -1);else if (k==13) document.getElementById('prevButton').click(); else this.value+=String.fromCharCode((96 <= k && k <= 105)? k-48 : k); "/>
<input type="button" onclick="window.location.replace(document.getElementById('preview').value);" value="Preview" id="prevButton" />
Then just open Welcom Page in the Menu you will have this
Finally add a white background to your html body
I'm looking to use Cordova CLI instead of a home grown ant solution for command line management of a phonegap/cordova project. I'm wondering what parts of the directory tree, if any, should not be placed under version control?
It depends on you project and your workflow.
For a lot of projects, the ./www folder would be sufficient as already mentioned, however there are some other folders that could be good to have depending on what aspects of the cli you are using.
Examples:
./merges for platform specific HTML/CSS/JS overrides
./.cordova for cli hooks (like before_build, after_plugin_add, etc)
Plus anything else custom you might want to keep out of ./www during development. For example, I have a ./src folder and the contents are concatenated and added to ./www as part of our build process. Our unit tests are also outside of ./www.
Instead of including a specific folder, I have a .gitignore that keeps build artefacts like ./platforms/* and ./plugins/* out of version control.
2015 - Cordova 5.1.1 answer
After working for some time with a Cordova project from 3.4.0 to 5.1.1, here's my feedback!
My .gitignore file looks like:
*~
**~
platforms/**
plugins/**
The www / .cordova and other folders you need are versionned.
My .cordova folder is currently empty (I used to have some errors when no .cordova folder, maybe it's not the case anymore)
All the plugins and platforms should be registered into the config.xml file.
If you add plugins by command line, use cordova plugin add $pluginName --save --shrinkwrap -> it will add the plugin automatically to config.xml and fix the version number, making the Cordova project easier to share among developers.
Read more about it and about sharing cordova projects, by the feature author.
Having the plugins in config.xml permits the plugins to be installed on other developer computers when they install a platform. Without that they will need to add themselves the plugin.
Somehow the config.xml acts like a package.json for NPM projects. But I still don't know how to handle a new plugin added, as far as I know the plugins are only installed during platform installation, there's no npm insall/update equivalent (but you can uninstall/reinstall the platform).
Here's an example config.xml from my project:
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.xxx" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
<name>xxx</name>
<description>
Your Knowledge Network
</description>
<author email="info#xxx.co" href="https://xxx.co">
xxx
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="phonegap-version" value="cli-5.1.1" />
<plugin name="cordova-plugin-device" spec="1.0.1" />
<plugin name="cordova-plugin-console" spec="1.0.1" />
<plugin name="cordova-plugin-whitelist" spec="1.1.0" />
<plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" />
<access origin="*" />
<allow-intent href="*" />
<engine name="browser" spec="^3.6.0" />
<engine name="android" spec="^4.0.2" />
<plugin name="cordova-plugin-statusbar" spec="^1.0.1" />
</widget>
The platforms do not get automatically installed (as far as I know), but at least when an user install the platform, he'll get the right platform version!
Some other people are using Plugman, a tool intended to manage Cordova plugins (not tested yet).
Well what u control is your own choise, although, I would personaly only use version-control on the www folder, since is where all your coding and stored content is ( html, css, js, images, audio, etc ), all the rest will be static content (in most of the cases)
Unfortunately I can't add only a comment, so here's my reply for #blockhead and Sebastien Lorber:
It is not necessary to save files from folder 'platform' even file 'AndroidManifest.xml' (or any configuration file for other platform). You can specify your preferences in 'config.xml' and it will affects these generated platform specific configuration files (e.g. AndroidManifest) - see phonegap documentation.
Then you can have under version control only folder 'www' and file 'config.xml'.
If anyone wants to code of Cordova CLI android platform centered (Android Hybrid complex project) into subversion then these files can be excluded while developing with team:
// to exclude files into repo
.gitignore
.gradle
.idea
local.properties
android.iml
/build
/gradlew
/gradlew.bat
/gradle
CordovaLib/CordovaLib.iml
If anyone is having problems with an svn error while import project of Gradle option from disk only not inbuilt subversion client of android studio then the following link will be helpful to you:
https://stackoverflow.com/a/34633162/5287727
I have been a cordova dev since v2.9 and the typical advice of excluding the platform and plugin folders works most of the time.... except for when it doesn't.
I have noticed on a project that feels like it uses every plugin known to man that this mantra has broken down, and I am unable to easily go back and forth in version control and reliably produce a new build.
This is for a few reasons:
Apple changes things up, and as time goes along there are a number of cordova hacks that need to be added to a project to get it to be reliable. For example, iOS 10 added a requirement that if you use the camera, then you needed to specify what you were using it for - or the app would crash when you tried. While I was waiting for the camera plugin to fix this, I needed to edit the iOS source files, then some time later I needed to build an old version, and in crept the issues.
But the real pain is when plugins stray from the cordova way of doing things. This project I am referring to uses the Adobe Aviary / Image editing SDK. Their instructions are to install the plugin, copy over some sdk files downloaded separately, then install it again. I tried making a script that wouldn't kill it, but it has ended up just being that I now commit the plugins and platforms directory to the app - this way I can go back in time and reliably recreate a build.
Yes it adds more size to source control, yes I would love to do it "right", but it has bitten me hard. Just my $0.02
TL/DR - When you starting working with more than a couple of plugins, you might need to consider adding the platforms and plugins folder to source control
Update 2019-11-05
For the project I was referencing we have since made a commitment to just use things that integrate correctly, and now I believe it is better to not check platforms into source control at all. If the plugin doesn't work, the client should not be using it.
Cordova has also moved away from providing an upgrade path for platforms, instead requiring you to remove and add the platform again - this means that this workflow is the only way forward in my opinion.
How do you change the string on the alert saying:
(Appname/whatever it is) would like to use your current location
Of course, I only want to change the appname part. Because when you use the PhoneGap framework, the string is very ugly, something like this:
/var/mobile/Applications/157EB70D-4AA7-826E-690F0CBE0F/appname.app/www/index.html
Someone having an idea?
You need to do the geolocation after the device is ready. The following Jquery code, for example, will geolocate without that nasty alert:
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
// your callback here
}
function onError(error) {
// your callback here
}
On phonegap 3.0 the answer by Pius Uzamere needs to be followed AND the plugin installed.
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
otherwise you will get the double permission request.
I just followed the documentation and solved it.
Open the terminal and cd to your project and enter following command.
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Also add this in your config.xml
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
It will solve this issue. :)
Source: http://docs.phonegap.com/en/3.0.0/cordova_geolocation_geolocation.md.html#The%20Command-line%0AInterface
Although this question is much older, I found similar questions here and here.
For my resolution, I had to add NSLocationWhenInUseUsageDescription to the .plist file. However, I suppose since my geolocation plugin was out of date, I had to update it first. Then I had to remove/add the Cordova iOS platform. Finally, I added NSLocationWhenInUseUsageDescription to the .plist file.
First, remove/add the geolocation plugin:
cordova plugin rm org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.geolocation
Second, remove/add the iOS platform:
cordova platform rm ios
cordova platform add ios
Last, add NSLocationWhenInUseUsageDescription to the .plist. Open /platforms/ios/{project}/{project}-Info.plist and add the following:
<key>NSLocationWhenInUseUsageDescription</key>
<string>[App Name] would like to access your location when running and displayed.</string>
See this iOS Developer Library link for detailed information regarding NSLocationWhenInUseUsageDescription versus NSLocationAlwaysUsageDescription versus NSLocationUsageDescription.
Finally fixed the issue.
IN the index.html just move your cordova.js up
<script src="cordova.js"></script>
as the first js file to be included (especially make sure it is above maps include js). This will make sure that the prompt shows only once.
No other codejs or ondeviceready is needed.
After looking for solution i've founded, just add a variable when you add the plugin location like this line
cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="your usage message"
None of the above answers worked for me. My location request was already firing on deviceready. Adding the following to config.xml fixed the issue:
<gap:plugin name="org.apache.cordova.core.geolocation" />
To solve the issue I have to run cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git which adds (automatically) to the config.xml the following:
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
To get things working I have to put also this lines into the config.xml:
<plugins>
<plugin name="Device" value="CDVDevice" />
<plugin name="Logger" value="CDVLogger" />
<plugin name="Compass" value="CDVLocation" />
<plugin name="NetworkStatus" value="CDVConnection" />
<plugin name="Debug Console" value="CDVDebugConsole" />
<plugin name="Geolocation" value="CDVLocation" />
<plugin name="SplashScreen" value="CDVSplashScreen" />
<plugin name="Battery" value="CDVBattery" />
<plugin name="Globalization" value="CDVGlobalization" />
</plugins>
Hope it could be helpful.
After making sure my geolocation request was called after the device was ready, making sure the geolocation plugin is correctly installed and configured, I was still receiving the unsightly popup.
I resolved it by moving and referencing my cordova.js file and cordova_plugins.js files into the root directory of my application (they were originally in a subfolder), so the path to cordova.js would be:
<script src="cordova.js"></script>
I feel this should be included in the documentation (maybe it is, but I haven't managed to find it)
Just by including "cordova.js" file in your html file where you are accessing this location will resolve this issue. NOTHING FANCY REQUIRED.
1) modify Location.m in PhoneGapLib project. replace all references of
navigator.geolocation with navigator_geo
2) Copy phonegap.js to phonegap2.js and put in root of app. I have now
learned that every time I build my application and load it onto device
or simulator, the phonegap.js file is being regenerated. OK. Well I
need to modify it so lets just use another one and deal with the
hassles of upgrading in the future.
3) Modify the line (in phonegap2.js) that creates the constructor for
the navigator.geolocation on 626 to be ... if (typeof navigator._geo
== "undefined") navigator._geo = new Geolocation();
4) Now in your HTML whenever you want to use the PHONEGAP GPS stuff,
you can reference it with navigator._geo.getCurrentPosition or similar
5) Enjoy the ONE, and CLEAN, location alert permission without
revealing to your users your intelligence to use PhoneGap and build an
app with HTML/JS.
* CAVEAT AND PLEASE HELP! *
If I run the watchPosition function, I will get the first location
update with all sorts of stats. There after, It will always report an
error. I assume this sucks for this 30 second time of getting accurate
GPS on these things?
http://groups.google.com/group/phonegap/browse_thread/thread/8067c2037816a9ad
I followed all the instructions and it still failed. In the end I played around with the PhoneGap demo and found the final solution:
Move all the js files and html files into the same folder (not even sub-folder). Congratulations! Problem solved, no permission alert any more : )
BTW, You'd better use a " setTimeout(function(){utility.getGeoData();},1000);" I found "document.addEventListener("deviceready", utility.getGeoData(), false);" not work for me.
Hope that helps when you find no solution above : )
Good luck!
Since I was struggling for days now with the same problem and finally found the solution, I decided to share it with anyone who still was not able to fix it.
The solution is simple: The geolocation plugin was missing in the plugins directory within the www directory, even though I added the plugin via the phonegap command line interface AND the plugin files were in the /Plugins directory. So you only have to copy the missing files into /www/plugins and you are done. Just simple as that.
If anyone needs the missing files: http://d.pr/f/xqhq
btw: i am using cordova 3.2.0.
I hope this works for you as well!
Phoengap/Cordova version 3.5 here.
Similar to Manuel's answer above but this time the plugin does not install in the platforms/ios/[appname]/Plugins folder.
The fix for me was to just manually create a new folder for the plugin in the ../platforms/ios/[appname]/Plugins folder > then rename it to org.apache.cordova.geolocation > then copy the .h and .m files of the plugin into it.
You can find the .m and .h files for the geoLocation plugin in the [root]/plugins/org.apache.cordova.geolocation/src/ios directory.
Got this error (and a lot of others) after upgrading Cordova from 3.6 to 4.3.
I think there is some fails in the upgrade process and the only working solution for me was cordova platform rm ios then cordova platform add ios
/!\ You will lost all your ios project settings and you need to reupload splash and icons.
In my case, I am using Cordova/Ionic and have experienced the same problem. That's because of the code before device is ready. I have simply wrapped the code with document.addEventListener on "deviceready". For example:
document.addEventListener("deviceready", function () {
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
...your code here...
});
});
Then the additional message does not appear.
I'm late to the party here, but will answer the question for reference.
The answer is to use the geolocation functions found in phonegap.js which is included with Phonegap. You will be able to find such instructions on the Phonegap site at http://www.phonegap.com.
If you use navigator.geolocation, you are using the default Safari geolocation system. This happens as PhoneGap works by running your pages effectively in a Safari instance. If you include phonegap.js into your site, you can use a separate geolocation method exposed by PhoneGap's Objective-C code, which will present the behaviour seen in other apps where it asks for permission from [your app name].
"Move all the js files and html files into the same folder (not even sub-folder). Congratulations! Problem solved, no permission alert any more : )" Like Caleb says works for me, well only moving the cordova.js file to the root and adding the plugin to config.xml
What is the Bundle display name of your project?
Try changing manually from the default value ${PRODUCT_NAME} and see..
That Permission to use location alert picks your bundle display name only!!