I am facing serious problems while developing an Angular 2 app and building it for iOS with Cordova. It kind of works when building and running it for Android (still there are some problems with routes on startup), but I can not get it running on iOS.
The app is developed with Angular 2.0.0-rc.1 and angular-cli.
Whenever I build the app with xcode for iOS, the app is stucked on Angular 2 loading - i guess it is a problem with the bootstrapping process, but I am not sure.
In console, I can see that it fails to load the component css files, like this error shows:
[Error] EXCEPTION: Failed to load file:///var/mobile/Containers/Bundle/Application/F325C057-2287-463A-ABF6-DB68944C63D9/Dooda.app/www/app/notifications/notifications.component.css
logError
logGroup
call
(anonyme Funktion)
invoke (zone.js:323)
onInvoke
invoke (zone.js:322)
run (zone.js:216)
(anonyme Funktion) (zone.js:571)
invokeTask (zone.js:356)
onInvokeTask
invokeTask (zone.js:355)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
invoke (zone.js:426)
The path is correct, it just can not proceed to load the files. In my iindex.html, I can see that the Container is empty, thus the Angular 2 stuff is not loaded there.
I have set the base href in index as following:
<base href=".">
If you need further information or code, please ask.
Have anyone faced the same issue and can help me here? I am really clueless what to do now, I have no idea why the file loading fails here.
Any help would be highly appreciated!
Thanks in advance!
The solution is very simple, just use
<base href="./">
in index.html file. It will work
had the same problem with Cordova / Ionic on iOS. It was caused by an empty file.
I had a component without template markup, but only with SCSS for the :host-selector.
It seems like Safari doesn't recognize any empty files via XHR and encounters a 404-like error, which breaks the application. To fix that, I removed all empty files from my components. After that it did work for me on iOS-emulator and native iPhone 6.
I am not sure whether it is related with base url for you problem.
In the normal, we will build and package the app with angular-cli into www dir. And after that, you should not see separate css files anymore. Because all css files will be packed in one file, based on your webpack setting.
Related
I have a strange situation with a project for iOS.
Its created using browserify and React for Cordova and aimed at iOS.
We have built the project for iOS using Cordova commands without any issues. It runs with no xcode errors or Javascript errors either however none of the JS ui appears on screen. We just get a blank white screen with the system bar at the top. See attached screen shot.
So far we have found out that if you add HTML to the index.html in WWW folder it prints that fine so I assume its the JS.
When we run in a browser it works as well as building for Android.
We have no problems with anything other than iOS (simulator and device build).
hopefully someone can help me out here because I'm stumped. Please let me know what files you need to look at and I'll make them available.
Thanks in advance.
IMAGES
The error screen: http://www.voidapplications.co.uk/errorScreen.png
What we expect to be shown: http://www.voidapplications.co.uk/whatWeExpect.png
If you are using internationalization component that's because you need to use the Intl polyfill:
Intl.js and FT Polyfill Service
Intl.js polyfill was recently added to the Polyfill service, which is developed and maintained by a community of contributors led by a team at the Financial Times. It is available thru cdn.polyfill.io domain, which routes traffic through Fastly, which makes it available with global high availability and superb performance no matter where your users are.
To use the Intl polyfill thru the Polyfill service just add one script tag in your page before you load or parse your own JavaScript:
<script src="https://cdn.polyfill.io/v1/polyfill.min.jsfeatures=Intl.~locale.en"></script>
When specifying the features to use thru the polyfill service, you have to specify what locale, or locales to load along with the Intl polyfill for the page to function, in the example above we are specifying Intl.~locale.en, which means only en, but you could do something like this:
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.pt"></script>
note: the example above will load the polyfill with two locale data set, fr and pt.
This is by far the best option to use the Intl polyfill since it will only load the polyfill code and the corresponding locale data when it is really needed (e.g.: safari will get the code and patch the runtime while chrome will get an empty script tag).
source & other ways to include Intl polyfill: https://github.com/andyearnshaw/Intl.js#getting-started
You can debug the UIWebView in the simulator with Safari http://moduscreate.com/enable-remote-web-inspector-in-ios-6/. You'll probably see a big error message in the console, if not you will have access to the debugger so you can step through and sort it out.
I have had this issue in the past, it turned out to be unsupported javascript features. for example, setting default parameters in the function. I.e:
function test( myvalue=0 ) { /* ... */ };
I had to initialise the value inside the function instead. You could also try removing any ecma script 2016 features you may have implemented.
Trouble shooting this type of issue was painful. I created a minimal version of the smallest part of my product compiled and ran it on ios emulator, added another chunk of the product, rinse and repeat.
Im sure there's a better way to detect these issues, but I do not know it.
trigger.io;
after upgrading to launchimage module 2.1 I just get error 'Validation failed for module 'launchimage' with error: ipad'
any ideas what this error is about?
the old docs were really good, providing a very clear spec:
http://legacy-docs.trigger.io/en/v1.4/modules/launchimage.html
the new docs for version 2.1 are totally opaque:
https://trigger.io/modules/launchimage/current/docs/index.html
n.b. apologies for posting this to SO - its basically a trigger.io support request
I believe this error indicates that you haven't filled out the public lauchimage module in its entirety like this.
If you are packaging the app as universal I think you'll need to have all the fields filled out as Trigger then prepares your ipa for all platforms(iPad and iPhone).
I found its easiest to just ignore the docs, create a demo project and use the trigger.io toolkit app to generate example config - prevents toolkit app from overwriting existing app config.
have to say I'd way prefer to work from the documentation and edit json config files directly rather than spend my time going through tedious point-and-click config..
Everything looks fine on the site, but those two errors are showing up in the console. If I hit the url the font downloads. Been trying to track this down for a while, but I am getting two errors in the console:
Failed to load resource resource:/font/fontawesome-webfont.woff?v=3.0.1
Failed to load resource resource:/font/fontawesome-webfont.ttf?v=3.0.1
How can I get rid of this error?
I recently encountered and solved this problem. The solution is to add the 'font' directory, and any other directories you want resources to be processed to your adhoc includes, so it ends up looking something like this in config.groovy (add directories as needed if you have resources elsewhere).
grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/font/**']
More detail here:
URLs within CSS files broken with Grails resources plugin 1.2.7
The resource: prefix is an intermediary step in the grails resource plugin's css rewriting process. You appear to be tripping over a bug in either the ad-hoc resource processor or in the css rewriter.
I made an example application (grails 2.1.1, font-awesome 3.0.2, grails-resources 1.1.6) which upon initial load shows no errors. After modifying the font-awesome.css with the application running, the rewriter then throws errors and leaves the broken resource: urls in place.
If I perform the same request with ?_debugResources=true the errors then disappear again.
In my sample's case, leaving the font-awesome files alone after deployment OR using the font-awesome-resources plugin prevented the errors from showing up.
I had the same issue.
Try using-
src:url(asset-path('fontawesome-webfont.eot?v=3.2.1', font));
instead of a direct static path.
It worked for me on clearing up those specific errors.
This is problem of ?v=3.0.1 change your file name and refrence as well. it will work fine. use only fontawesome-webfont.woff & fontawesome-webfont.ttf file name
I'm experiencing a weird error with my PhoneGap app: every odd time I run the simulator (or the test deployed app on my phone), I get the error
Failed to load webpage with error: The requested URL was not found on this server.
It works every even time I run the simulator. This has been happening since I first deployed my app. I was not using any plugins at the time, but since then I've been trying to get the Facebook iOS SDK working, and this probably isn't related but the times that my app actually succeeds to start up, I can't click anything.
God help me.
This is my first time building an iOS app, so this is probably a newbie mistake - before this my app was just a mobile website.
I just experienced this issue. The Urls are case sensitive. So if you have Login.html as the file name, it shouldn't be login.html in the code.
It was a javascript redirect that was causing this. Avoid using window.location = ??? on the initial pageload at all costs in PhoneGap :)
kill -9 ps ax | grep Simulator | grep -v grep | awk '{print $1}'
Try this line on the terminal and then run. Maybe there is a problem in simulator, it will resolve
I had the same issue. However, it was a different cause.
We have a webapp that uses clean urls. We use htaccess to automatically check for .html. That way our links in the code/url are just myapp.com/page1 vs myapp.com/page1.html
This caused me about an hour of headaches, as I began exploring the port over to phonegap. Nothing would work. I was brand new to phonegap, so I wasn't sure what it was. I did the whitelist, external hosts, etc. Then I realized I dont have the htaccess file in the phonegap directory and that I need complete links.
I know its specific. But for what its worth, there you have it.
I have an app that uses jquery.mobile-1.0a4.1.js. The script has worked every time, but now when I try it there is a 1 in 3 chance that I will get this error:
$.mobile.pageContainer is undefined
[Break On This Error] $.mobile.pageContainer.addClass(className);
I have added the origional version and tried again, but I still get the error (line 2425)
Is there any JQuery Mobile version I get that will be error free? Again this error is in the mobile file, and not my code (jquery.mobile-1.0a4.1.js)
Edit I get the same issue when I use the min version as well jquery.mobile-1.0a4.1.min.js
"1 in 3 chance" to me sounds like you have a race condition based on the download times of your scripts. You may want to look at firing custom events when everything is downloaded and ready to go instead of having a downloaded script immediately executing.
Again this error is in the mobile file, and not my code
The error is being reported in the JQuery mobile code, but it could be caused by an error in your script. Try creating a simple test script that uses JQuery mobile to see if you still get the error.
Make sure you still link to the correct JQuery.js file and that's still up.
It's always best to download a working JQuery script and host it on your own server though. So no changes will ever be made to it.
As for your question if there are other JQuery Mobile versions, I'm sure there are.. But that's what Google will help you with.