I've started my app project using standard file organization. Then I've switched to a more elaborate folder structure.
When I run my app on Chrome through (ionic serve) everything works flawlessly but when I deploy my app to my phone through Cordova(ionic run android) it can't find the custom files I've created.
It seems like there is some sort of permission missing. Any ideas of what might be wrong?
update: the app project also exists under /platforms/android/assets/.
In that folder the "www/components/..." files exist.
path: www / templates / client.html
-----> THIS WORKS
.state('app.client', {
url: '/client',
views: {
'menuContent': {
templateUrl: 'templates/client.html',
controller: 'ClientCtrl'
}
}
})
path: www / components / client / views / client.html
-----> THIS DOESNT WORK
.state('app.client', {
url: '/client',
views: {
'menuContent': {
templateUrl: 'components/client/views/client.html',
controller: 'ClientCtrl'
}
}
})
index.html
Using chrome's debugging I noticed that the client JS files are not accessible. Hence, it could be some problem with gulp and how it copies the files into the APK file...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="components/client/client-controller.js"></script>
<script src="components/client/client-service.js"></script>
FOUND THE PROBLEM!!
The issue was not related to folder permissions but with cached build files.
First time I've created the folder I did it with capital letters. "Components/Client/View"
After I've renamed the files both in the code and physical files the changes didn't work because the process of ionic build keeps cache of folder structure.
Deleting the content of /android/build/ folder solved the problem.
Views in an Ionic App are often referred to as templates because Angular controllers refer to them as such. Because of this, views are often stored in a /templates folder where each view is in a separate .html file. So, my suggestion would be to keep your components folder inside the templates folder such that the route for your templateUrl would be: templates/components/client/views/client.html.
Also, the controller and service filepath must be defined in the index.html. Hope it suffices your needs.
Related
I have a NativeScript/Angular application that uses code sharing.
To make my project more organized, I have created a core folder that contains a sub-folder for routing:
Routes are defined in app.common.ts:
export const appRoutes: Routes = [
{ path: '', redirectTo: '/products', pathMatch: 'full' },
{
path: 'products',
loadChildren: '../products/products.module#ProductsModule'
}
]
Of particular interest is the module path shown in the following property:
loadChildren: '../products/products.module#ProductsModule'
Serving this in the browser using ng serve -o works fine.
Bundling this to run on Android using tns run android --bundle doesn't work as it can't find the module.
If I change the path to ~/app/products/products.module#ProductsModule, the Android app then runs, but the web application can't find the module.
If I then leave the file watcher running for the Android build and change the path back to ../products/products.module#ProductsModule, both Android and web work fine.
I don't want to move my routing files back to the src folder. I am also reluctant to include any hacks such as platform-driven path string mangling.
If you have any explanations as to why this is happening and/or a robust fix that isn't 'hacky', I'd be keen to hear it.
The problem was stemming from some quirks regarding the file watchers. When I change the path to the following, both platforms work fine:
../../products/products.module#ProductsModule
The reason I didn't select this path from the outset is because I used ~/app/products/products.module#ProductsModule to begin with and edited this to get the web build to work while the Android file watcher was still running.
With both the Android and web file watchers terminated and the path adjusted to the one provided above, they both work.
I'm trying to build an application on Sencha Touch for android, so I use Cordova to put it on my device.
The problem I'm facing is that everything works fine on my computer, but on android, the device can not find and read the locales files for each stores (I've already test on other Android device).
Here is the error on logcat:
E/AndroidProtocolHandler: Unable to open asset URL: file:///android_asset/www/app/store/recipes/list.json?_dc=1481398604306&node=ext-data-treestore-1-root&page=1&start=0&limit=25
E/AndroidProtocolHandler: Unable to open asset URL: file:///android_asset/www/app/store/recipes/pates.json
And here is the store that I use to read "pates.json":
var ingredientsData = Ext.create('Ext.data.Store', {
model: 'fr.ESIR.GreenVentory.model.IngredientListModel',
autoLoad: true,
proxy: {
type: 'ajax',
noCache: false,
enablePagingParams: false,
limitParam: null,
url: "./app/store/recipes/pates.json",
reader: {
rootProperty: 'ingredients',
totalProperty: 'totalCount'
}
}
});
And the files that I try to load are locally stored in "app/store/recipes/"
If someone have a solution, it would be cool for me to know it
I resolve my own problem:
All the data was stored on app/store of the sencha application, and when I build the Android application with Cordova, it doesn't take the json file because I haven't specify the file location.
So I create a data folder on the project root, put my json file and the folders that contain them on the data folder.
Don't forget to update the differents references of your json files
After that, it still working on the web version, but not on Android, because cordova don't integrate your files. Cordova reads the app.json file that you have on the root of your project. Go to the "resources" section of the file. Normally you have something like this:
/**
* Extra resources to be copied along when build
*/
"resources": [
"resources/images",
"resources/icons",
"resources/startup",
"data/*",
"data/recipes"
]
Just add the location of the folder that contains your file and cordova should integrate them when it compiles
I am new to phone gap and really struggling to get this done.
Basically, the directory structure is like this:
/www
css/*
img/*
js/*
pages/*
config.xml
index.html
When I try to include add images from index.html referenced in img directory, the image loads successfully. But when i try to reference an image from a page within the js directory, it does not load the image. I do it from a index.js within the js directory.
I provide the path like this when inside the js directory:
<img src="../img/abc.jpg">
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
Basically i do not invoke the cordova_plugin.js file. It is invoked by plugin.js that i include in my html.
So basically when in my www/index.html I include
<script type="text/javascript" src="phonegap.js"></script>
and it implicitly invokes the cordova_plugins.js which loads all the plugins. This works fine.
But When inside www/pages directory i reference it like this
<script type="text/javascript" src="../phonegap.js"></script>
and in this case phonegap.js loads successfully but it fails to load the cordova_plugins.js and thus none of the modules load.
Note: I found that the files do not load by debugging it in chrome.
Any help would be highly appreciated
Your javascript files are building html to go into the index.html DOM, so you should include the src as it will be referenced by index.html:
<img src="img/abc.jpg" />
Not sure what you mean here:
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
So, maybe I'm misunderstanding your problem.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
How are you referencing the .js files? For pages/foo.html it would be:
<script type="text/javascript" src="../js/cordova_plugin.js"></script>
But again, not sure exactly what you are after without some code examples.
When compiling a cordova application every single file in my /www folder gets copied to the assets/www folder(android) but I'd like to customize what files are copied. I use several pseudo languages like CoffeeScript, Jade or Stylus which are auto-compiled by my IDE and they shouldn't be shipped into the final application.
With the help of this article, I found that you can create/edit the platform/android/ant.properties, and add the following line to it:
aapt.ignore.assets=!*.map:!thumbs.db:!.git:.*:*~
With this line, any file or directory that matches one of these patterns will not be included in the .apk file:
*.map
thumbs.db
.git
.*
*~
I found that editing the platforms/android/build.xml won't work because it's overwritten each time the build is invoked; also, creating a build.xml file in the root of the project didn't work.
The rules for this property are the following, taken from $ANDROID_HOME/tools/ant/build.xml:
<!-- 'aapt.ignore.assets' is the list of file patterns to ignore under /res and /assets.
Default is "!.svn:!.git:.*:<dir>_*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
Overall patterns syntax is:
[!][<dir>|<file>][*suffix-match|prefix-match*|full-match]:more:patterns...
- The first character flag ! avoids printing a warning.
- Pattern can have the flag "<dir>" to match only directories
or "<file>" to match only files. Default is to match both.
- Match is not case-sensitive.
-->
<property name="aapt.ignore.assets" value="" />
Hidden (.*) folder & files will be ignored by default
All hidden files and folders will be ignored while build for example .git/ & .gitignore
To hide : Rename the folder by a . (dot) prepended to the folder/file name.
Use Terminal in Linux/Mac to rename the folder.
mv dev .dev
Use cmd in Windows
ren dev .dev
I do not know any way how to filter files for cordova, but I can describe you approach that we use in our projects.
We are using gruntjs with phonegap plugin. We configure it to use prebuilt folder (which contains only necessary files and folders) and it:
creates cordova/phonegap project
adds plugins,platforms
builds native applicaiton
launches native application on emulator
Main thing in this approach is that cordova/phonegap project (directory with .cordova, platforms and www folders) is just a build artefact.
Here is relevant part of our Gruntfile.js as an example:
phonegap : {
config : {
root : './out/dist',
config : {
template : './config.tpl.xml',
data: {
id: pkg.id,
version: pkg.version,
name: pkg.name,
author : pkg.author
}
},
path : 'out/phonegap',
plugins : [
// PHONEGAP OFFICIAL PLUGINS
'org.apache.cordova.globalization',
'org.apache.cordova.network-information',
'org.apache.cordova.splashscreen',
//THIRD-PARTY PLUGINS
'de.appplant.cordova.plugin.local-notification'
],
platforms : [
'android'
],
maxBuffer : 200, // You may need to raise this for iOS.
verbose : false,
releases : 'out/releases',
releaseName : function() {
return pkg.name + '-v' + pkg.version;
},
// Android-only integer version to increase with each release.
// See http://developer.android.com/tools/publishing/versioning.html
versionCode : function() {
return 1;
}
}
}
Note, out/dist is generated by previous build step and contains concatenated and minified version of code.
I've created a custom script to ignore files/folders which works not just for android:
Add this to your config.xml:
<ignore entries="lang,foo/bar,ignore/asdf.html" />
And you need two more files located in hooks/before_build and hooks/after_build folders.
I highly recommend cordova-plugin-exclude-files. You simply specify files to exclude as pattern attributes of exclude-files tags in your config.xml file.
For example, to exclude all .scss files:
<exclude-files pattern="**/*.scss" />
And to exclude all files with the string "ios-only" on the Android platform only:
<platform name="android">
<exclude-files pattern="ios-only" /> </platform>
This is what I'm doing. I've moved the src files for the app that was in www folder to another folder created in root - web-app. Next, the following script was added in package.json :
This surely needs to be refined, but am working with it as makeshift arrangement.
Good Luck...
I'm trying to acccess the Camera using Sencha touch, ported to Android using Phonegap. As the Sencha touch guide to using native APIs suggests, I declared the camera as a required:
Ext.require('Ext.device.Camera');
But unfortunately, I get this error:
07-19 11:51:42.159: E/Web Console(8668): Uncaught Error: [Ext.Loader]
Failed loading './device/Camera.js', please verify that the file exists at
file:///android_asset/www/lib/touch/sencha-touch-all-debug.js:8000
The sencha library does have Camera.js under device. I'm not sure why this error appears.
Edit 1: Still not able to find an answer. Would really appreciate any suggestions.
If you download the source code of sencha touch, there will be a directory named "device" in the "src" directory (after unzipping). Camera.js is in that directory. Seems sencha-touch-all-debug.js or sencha-touch-all.js not include the source code from all .js files in "device" directory. You must manually copy that directory to your android assets directory (eg the file:///android_asset/www/lib/touch/device).
or
You can copy the directory device in any place on your android assets (eg file:///android_asset/www/device). Then on the first of javascript declaration before you use sencha touch you must type the following code:
Ext.Loader.setConfig ({
paths: {
'Ext.device': 'device'
}
});
The code tells that "Ext.device" is reference to directory "device". Make sure the "device" directory is relative to the html file that calls the javascript (eg index.html). From the above code means the "device" directory is same location with the html file.
If you are using phonegap for deploying, then use Phonegap camera functionality. I have used it in my app in following way:
Add <script type="text/javascript"
src="cordova-x.x.x.js"></script> in your index.html file.
Use following code to open Camera:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
For more information on this api use following link:
http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera
On the sencha forum there is a thread about it.
The problem appears to be the naming of Phongap - Cordova. Executing this before Sencha Touch is loaded should fix that.
if(typeof window.Cordova != 'undefined') {
window.PhoneGap = window.Cordova;
}