Enabling Nativescript livesync dev in VS Code Windows - nativescript

I'm looking at developing in Nativescript w/ Typescript/Ang. under Windows.
Everything runs.
When I try to enable livesync for Android emulator - seems to work if I modify a .ts (typescript) file.
But if I modify a .css file - the watcher seems to detect it and I see a message about "applying changes" - but there's no effect in the emulator. The target program doesn't restart.
How can I get tns watch to work with modifications to css files.
Thanks.

Related

How to debug a Cordova app showing blank screen in XCode Simulator

We inherited an app where the frontend is built in Vue 2 and the mobile app built with cordova-ios (6.2.0) and cordova-android (10.1.1). It has built ok and loaded in the XCode (13.2.1) simulator until recently.
It's got some fairly old packages which I upgraded, and managed to get it to run both in vue ui and Android Studio (Chipmunk). (I had upgraded the packages because somewhere along the line that build broke -- so I deleted node_modules and package-lock.json, then upgraded packages one by one until I got it working again.)
However, when I do the Cordova build for iOS, open the project in XCode, do an XCode build, then open it up in a simulator, the screen is completely blank.
These are the only files that changed in version control between releases:
package.json
package-lock.json
babel.config.js
(various Vue files under src/views)
I'm fairly new to mobile development so don't really know how to proceed. How would I go about debugging the project (simulator, XCode, whatever) to see what has broken?
Any extra information you need please ask.
Edit 1: Avinash's suggestion about debugging via Safari Dev Console was a good tip (thanks Avinash). I've checked the app HTML vs a working build and it seems somehow the injection of the app content into <div id="app"> is not happening. In the android version it's fine, so maybe something in the cordova build is not happy.
There's an error message in the debug logging in XCode saying it could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier which is also different from the output in a working build.
Avinash's suggestion is spot on in that it can help troubleshoot startup problems (I've had to do this a bunch of times myself). From your update, it sounds like there's an issue with the splash screen configuration.
There's some iOS specific documentation for the splash screen plugin on the Cordova documentation website. A couple tips that might be useful in tracking down the issue:
You can use a single image for the splash screen if desired. I've got just one defined for my app (the needed dimensions are defined in the Cordova docs above):
<platform name="iOS">
...
<splash src="www/res/screen/ios/Default#2x~universal~anyany.png" />
</platform>
I have also run into issues where the storyboard file has gotten corrupted, probably by me falling on my keyboard and clicking on something while the editor was open. To rebuild, you can remove and re-add the iOS platform:
$ cordova platform rm ios
$ cordova platform add ios
This should copy over the splash image and rebuild the storyboard file.

Why is the React Native Packager not creating a new bundle when changes are saved?

On Mac, I created a React Native project via create-react-native-app and then ejected the app. Then I ran npm run ios, which is an alias for react-native run-ios. At that point, I can see it start up in the simulator and the packager opens in a new terminal window. It looks like it is watching for any changes on JS files in my project directory, yet when I make a basic edit in the JSX in the App.js file, I don't see anything happening in the packager terminal window and it doesn't reload the app in the simulator.
Edit: I just tested it on the react-native CLI and it happens there as well. I'm at a loss what the issue could be.​​
Am I missing something or is there another issue?
For the app to refresh, you need to do Cmd + R which refreshes the packager and lets it watch the refreshed bundle. For Realtime Loading, use Cmd + D to enable the devtools and enable Hot Reloading. Hope it helps!

Nativescript - weird page crash in ios

Got an app and works on Android and iOS.
There's one particular page in the app when I visit crashes in the production version of iOS app. Works fine in the emulator, works on the device in debug mode.
I narrowed it down to nativescript-imagepicker plugin. Even though no plugin specific code is being executed when the page is opened - it crashes as long as include the plug-in and have the code in a function (not called). If I comment out the code (but still include the plugin) - that works also.
What could cause such a problem?
Does the NS back-end run some code if the plugin is referenced in the page file?
Again works fine in emulator on iOS and also when tested directly on the device.
The problem occurs when the app is downloaded from itunesconnect - so there's no way for me to test it - console messages etc.
Using NS 3.2 with nativescript-imagepicker 0.3.6.

React Native app stuck on blank white screen with remote debugging using Nuclide

Steps to Reproduce / Screenshots
Apply all operations from the instruction:
Create a blank React Native project with $ react-native init [project name].
From the command Palette (Cmd-Shift-P), choose "Nuclide React Native: Start Packager" to start the React Native Server.
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: $ react-native run-ios (or choose another existing simulator, for example, react-native run-ios --simulator="iPhone4s").
(Important: #4 should follow AFTER #3, and chrome debugger should be closed).
From the iOS simulator, press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. For example, select Debug JS Remotely.
Environment
Atom version 1.15.0
Nuclide plugin version 0.214.0
React Native version: 0.42.3
Platform(s) (iOS, Android, or both?): iOS
Device info Simulator/Device? - Simulator iOS 10.2 / iOS 8.1
OS version? - MacOS 10.12.3
Debug/Release? - Debug
In the same doc said: "...After you enable debugging (#5) from the simulated application, Nuclide will attach to that debugging process automatically since we primed the Debugger above (#3)." So before I clicked Debug JS Remotely I saw the working react app as expected:
And after I clicked Debug JS Remotely I see that the Nuclide debugger changed its status from Starting debugger... to The debuggee is currently running. as expected as well:
BUT after I click Debug JS Remotely I see white screen only
And there are no errors. As soon as I turn off remote debugging, everything loads fine again.
This happens with Nuclide debugger only, with chrome debugger, everything works well.
check maybe there is no breakage in your code. it sometimes happens when you skip some minor errors.

application-settings not working as expected

Wrote a small app and saved a string via application-settings module.
I can read the value fine within that same session.
If I close the app in the emulator and restart it in the emulator, I can read the value also.
But if I rebuild the project in the IDE (VS Code - pressing "refresh/reload" icon) - the app restarts and the stored value is no longer there.
Seriously?
Is application-settings stored data not persistent across sessions.
If you rebuild your application, it will delete the old application on your smartphones + all the datas that was stored in application settings.
If you don't want that the stored datas disappear meanwhile you are changing the code you should use the livesync options.
In order to do that, go with a terminal at the root of your app projet and type the following command :
tns livesync ios --watch
For IOS or
tns livesync android --watch
For Android
I hope this will help you

Resources