My team recently extended our supported platforms to iOS, and I still haven't been able to get it to run on any iOS devices. Using "ionic serve" and "ionic run android" works great, everything works as expected. But when using "ionic run ios", the app loads and goes to the classic White Screen of Death. No errors are logged, and nothing is displayed.
The page that does load (the white screen) looks like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body class="platform-ios platform-cordova platform-webview">
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
</body>
</html>
I tried loading up the basic starter Ionic 2 app using the same commands and approach and it worked, and the page had content inside of it. From using some console.logs and the like I found that the code never loads the app.ts file, so that would explain why it never reaches the home page, but since no errors are logged I can't figure out where to even look at to fix anything. I'm wondering if something is wrong in the app.bundle.js, but I just don't really know where to start.
Has anyone ever had any similar issues?
My version info is as follows:
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.0
Xcode version: Xcode 7.3.1 Build version 7D1014
iPad mini 2 and iPhone 6 iOS version: 9.3.3
I'll leave it here, suddenly someone come in handy.
It is necessary to correct the errors in the console is running ionic serve.
Otherwise, just do not compile the necessary file app/www/build/js/app.bundle.js
For completeness, better run applications in production environments.
They are generally more informative than emulators.
Related
I'm writing an app with cordova, Ionic v1, and AngularJS 1.5.3.
ionic info
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : ionic1 1.3.5
#ionic/v1-toolkit : 1.0.22
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
NodeJS : v10.21.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
In the past the new iPhone X came out and I added some code to make adustments for the "safe area".
css
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
It was working for me for a long time.
However, I noticed that with the iPhone X and XR with iOS 13.6 I'm having issues with the "safe area".
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
I'm finding that I have to multiply the safe-area-inset-bottom by 4 to make any progress.
$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}
What could be wrong?
It has changed to "constant" as of 11.2
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area- inset-bottom) constant(safe-area-inset-left);
}
Why are you using Ionic 1?
I want add the CoreUI package to my rails (with React) application.
But i don't know how to do. I know there is a coreui gem but this gem has the 1.0.1 version of coreui...
Maybe just a npm install #coreui/coreui install it ? I don't know..
I just want to add the coreui react template into my rails app..
Thanks!
Its mentioned on Core UI official docs....
=====add css=====
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui/dist/css/coreui.min.css">
=======add js========
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#coreui/coreui/dist/js/coreui.min.js"></script>
======npm install -> get the react packages and functions=======
npm install #coreui/coreui
Installed JetBrains WebStorm 2018.1 EAP
Installed Dart using a third-party installer by link from official site
Created a new project, with default settings. Dart version 2.0.0-dev.20.0. Check Generate sample content checkbox and select Dart Web App. Create.
Press Run.
Get message:
No pubspec.lock file found, please run "pub get" first.
Press 'get dependences'. In the window below, I get the message:
Working dir: C:\Users\Anton\Source\Front\untitled "C:\Program
Files\Dart\dart-sdk\bin\pub.bat" get Resolving dependencies...
Overriding the upper bound Dart SDK constraint to <=2.0.0-dev.20.0 for
the following packages:
browser
To disable this you can set the PUB_ALLOW_PRERELEASE_SDK system
environment variable to false, or you can silence this message by
setting it to quiet.
+ browser 0.10.0+2 Downloading browser 0.10.0+2... Process finished with exit code -1 073 741 795
I try to execute pub get through the terminal - and get the same message
I add environment variable PUB_ALLOW_PRERELEASE_SDK, like this: set PUB_ALLOW_PRERELEASE_SDK=false, but but after nothing has changed
I try download manually, but I can not find a description of where these files should be located, relative to the project
I'm new to the frontend and especially to dart so most likely I miss some small detail
pubspec.yaml
name: untitled
version: 0.0.1
description: A sample web application
dependencies:
browser: any
dev_dependencies:
# unittest: any
untitled.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="untitled.css">
</head>
<body>
<div id="sample_container_id">
<p id="sample_text_id">Click me!</p>
</div>
<script type="application/dart" src="untitled.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
As Gunter said, the warning about PUB_ALLOW_PRERELEASE_SDK is to be expected while using a pre-release Dart SDK.
Prior to upgrading to Dart 1.12.x version the following .html file links resolved correctly.
.html
<!DOCTYPE html>
<link href='../../../../packages/core_elements/core_icon.html' rel='import'>
<link href='../../../../packages/html_components/utility/safe_html.html' rel='import'>
<polymer-element name='required-tooltip'>
<template>
<div layout horizontal flex id='<tipp></tipp>'>
<core-icon id='tip-icon' icon=''></core-icon>
<h-safe-html id='label' content='<bol><u>Required</u><bold>'></h-safe-html>
</div>
</template>
<script type='application/dart' src='required_tooltip.dart'></script>
</polymer-element>
Lines 2 and 3 imports did resolve correctly.
After upgrading to the new .packages file instead of the /package symlinks, none of the links are resolved.
What are the new rules to correct these issues?
Thanks
WebStorm 11 EAP uses the --no-package-symlinks when you run pub get or pub upgrade. This feature is still experimental. A simple workaround is to run pub get or pub upgrade from command line and you get the packages directory with the symlinks back.
When resolution using the .packages file is supported everywhere, there shouldn't be any change necessary in your code even when the packages directory doesn't exist anymore.
See also https://github.com/dart-lang/sdk/issues/24237
The generated sample content for a web_ui applications adds xclickcounter.dart AND xclickcounter.html in the web folder. This is an Application Package.
How may I add these to the lib folder to be used as a package that other pacages will depend on? Is it possible?
(TL;DR - just drag the xclickcounter files into a lib folder, and use that package in another package)
Yes, this is possible. You would structure your projects like this:
xclickcounter/
pubpec.yaml
build.dart
lib/
xclickcounter.html
xclickcounter.css
xclickcounter.dart
web/
test.html -- if you wanted to test it in this project
...elsewhere...
myAppProject/
pubspec.yaml
build.dart
web/
myapp.html
myapp.dart
myapp's pubspec.yaml would contain
dependencies:
xclickcounter:
path: ..\..[relative_or_absolute]..\xclickcounter
[or deploy xclickcounter to git]
myapp.html would contain something like:
<head>
<link rel="components" href="package:xclickcounter/xclickcounter.html">
</head>
<body>
<x-click-counter></x-click-counter>
...
</body>