I am testing on a physical Android device (Note 9) using NativeScript 6.2.0. When I make a change, HMR activates and displays the following:
JS: HMR: Checking for updates to the bundle with hmr hash 2e86b3ce6c9f6a005362.
JS: HMR: The following modules were updated:
JS: HMR: ↻ ./components/friends/add_friends/add_friends.xml
JS: HMR: Successfully applied update with hmr hash 2e86b3ce6c9f6a005362. App is up to date.
Restarting application on device 278165d4781c7ece...
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: HMR: Checking for updates to the bundle with hmr hash 2e86b3ce6c9f6a005362.
JS: HMR: The following modules were updated:
JS: HMR: ↻ ./components/friends/add_friends/add_friends.xml
JS: HMR: Successfully applied update with hmr hash 2e86b3ce6c9f6a005362. App is up to date.
JS: topmost() is deprecated. Use Frame.topmost() instead.
device: 278165d4781c7ece debug port: 40000
Notice that the app is restarted even though I just changed the text in one of the labels.
Here is my package.json
{
"nativescript": {
"id": "io.company.app",
"tns-android": {
"version": "6.2.0"
}
},
"main": "app.js",
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"#nstudio/nativescript-camera-plus": "^3.0.3",
"#nstudio/nativescript-loading-indicator": "^1.0.0",
"nativescript": "^6.2.0",
"nativescript-contacts": "^1.6.2",
"nativescript-fonticon": "^2.0.0",
"nativescript-masked-text-field": "4.0.3",
"nativescript-permissions": "^1.3.8",
"nativescript-theme-core": "2.0.5",
"tns-core-modules": "6.2.0",
"tns-platform-declarations": "6.2.0"
},
"devDependencies": {
"nativescript-dev-webpack": "1.3.0",
"typescript": "3.4.5"
},
"gitHead": "f28dbc60d74dd2cef4b645afd8fdd63bbb12c73e",
"readme": "NativeScript Application"
}
Am I missing some setting that would allow HMR to work properly?
EDIT: Furthermore, it does not seem that HMR loads css changes. I have to make a space change in one of the ts files for the css to be loaded. This whole thing makes HMR useless.
Thanks
This solved my issue:
I did a rm -rf node_modules and then npm update and npm install, and now i have HMR (on the scss project too) - ios on a mac
I got a similar problem after changed the applicationId in the app.gradle. I set back the first applicationId. It is working now.
Related
Today, I created a new project, installed some plugins and tap on "Run" in NativeScript Sidekick, to build my app on cloud to my Android device, but I faced this error:
[00:01:35.796] [WARN] Attribute application#appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:8:5-18:19 to override.
FAILURE: Build failed with an exception.
Some said that NativeScript Sidekick and NativeScript Cloud build are not yet compatible with NativeScript 6
I have been navigating for hours and reading similar issues on GitHub and Stack Overflow, but none of them worked for me, or for Cloud build.
This is my package.json content:
{
"nativescript": {
"id": "com.app.test",
"tns-android": {
"version": "5.4.0"
},
"tns-ios": {
"version": "5.4.2"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"nativescript-geolocation": "5.1.0",
"nativescript-mapbox": "4.4.1",
"nativescript-plugin-firebase": "9.0.3",
"nativescript-theme-core": "1.0.6",
"nativescript-ui-autocomplete": "5.0.0",
"nativescript-ui-dataform": "5.0.0",
"nativescript-ui-listview": "7.0.1",
"nativescript-ui-sidedrawer": "7.0.0",
"nativescript-webrtc-plugin": "2.0.0-alpha.18",
"tns-core-modules": "5.4.3"
},
"devDependencies": {
"nativescript-dev-typescript": "~0.10.0",
"nativescript-dev-webpack": "~0.24.0"
},
"gitHead": "**************",
"readme": "NativeScript Application",
"author": "***"
}
Edit
I am not using NS 6, I use NS 5, since Sidekick is not yet compatible with NS 6. Also, I removed UI Pro components plugins, and it seems to work now. The pro UI plugins might work if I use older versions.
I'm not sure the compatibility of SideKick/Cloud build and 6.0/AndroidX, that normally lags a couple weeks. However I can tell you based on your package file, that it won't work. You are mixing Android & AndroidX :)
NativeScript requires NS 6.0 runtimes for AndroidX. NS 5.4 DOES not use AndroidX. But you are using NS-UI versions which are AndroidX.
So to test if sidekick/cloud builds supports AndroidX I would make the following changes:
{
"nativescript": {
"id": "com.app.test",
"tns-android": {
"version": "5.4.0"
},
"tns-ios": {
"version": "5.4.2"
}
},
Needs to be changed to
{
"nativescript": {
"id": "com.app.test",
"tns-android": {
"version": "6.0.0"
},
"tns-ios": {
"version": "6.0.1"
}
},
In addition this needs to be changed:
"devDependencies": {
"nativescript-dev-typescript": "~0.10.0",
"nativescript-dev-webpack": "~0.24.0"
},
to
"devDependencies": {
"nativescript-dev-webpack": "~1.0.1"
},
And finally this:
"tns-core-modules": "5.4.3"
needs to be
"tns-core-modules": "~6.0.1"
As for the rest of the dependencies; that is hard to say; because NativeScript just transitioned to AndroidX; their is a good change that some of the other plugins you have listed; might not be AndroidX compatible. I would honestly try building an app with out any of the extra plugins first:
"dependencies": {
"nativescript-theme-core": "1.0.6",
"tns-core-modules": "~6.0.0"
},
I am trying to create an angular 2 app
Below is the typescript code
import { Component } from 'angular2/core';
#Component({
selector: 'my-app',
template: ' < h1 > My First SharePoint Add In using Angular2... !!! < /h1>'
})
export class AppComponent { }
It is throwing the below errors
cannot find module angular2/core
Experimental support for decorators is a feature that is subject to change in a future release
For the second error I have also added
"experimentalDecorators": true,
in the tsconfig.json
I have also installed TypeScript SDK for Visual Studio 2017 and restarted Visual studio, but no luck
I also tried npm install -g typescript#latest
Below is my package.json
{
"name": "imageslideshow",
"version": "1.0.0",
"description": "slide show for image libraries",
"main": "index.js",
"dependencies": {
"#angular/core": "^4.3.2",
"angular2": "^2.0.0-beta.17",
"es6-promise": "^4.1.1",
"es6-shim": "^0.35.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.20.17",
"zone.js": "^0.8.16"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "vignesh",
"license": "ISC"
}
When I try npm install I get the below message
Make sure you have run npm install on your project and the
dependencies are available in the node_modules folder.
In your package.json file you have dependencies with both Angular
version 2 and 4. Decide which one you want to use.
If you want to use Angular version 4 your import should be:
import { Component } from '#angular/core';
I'm trying to use the Parse push plugin with my Ionic 2 app from: https://github.com/taivo/parse-push-plugin.
Once downloaded it says that it's ready to use anywhere in my code with the ParsePushPlugin name space. When I try to use it without importing it throws the error:
Cannot find name 'ParsePushPlugin'.
Upon doing either of the following in the terminal:
cordova plugin add https://github.com/taivo/parse-push-plugin
OR
ionic plugin add https://github.com/taivo/parse-push-plugin
The result is deposited in my 'plugins' directory. This is not part of Ionic native so I can't just import from Ionic Native. I have also tried importing it from the plugins directory using the ParsePushPlugin name space both with and without curly brackets but that does not working either. Where am I going wrong?
UPDATE
I updated my package.json based on an inquiry and as of this package.json along with a full re-start the app still says that cordova is not defined.
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/storage": "1.1.6",
"#types/parse": "^1.2.32",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"underscore": "^1.8.3",
"moment": "2.10.3",
"sweetalert": "1.1.3",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.45",
"typescript": "2.0.6"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-facebook4",
"cordova-plugin-nativestorage",
"parse-push-plugin"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "CPM: An Ionic project"
}
set
declare var cordova:any;
and use like this:
platform.ready().then(
() => {
console.log("MyApp::constructor platform.ready");
cordova.plugins.ParsePushPlugin.// settings and methods.
}
);
Check this answer
Note: Cordova plugins do not work with ionic serve as they are not loaded to the browser. You will need to test in a phone.
To be 100% clear. In order to use the Taivo Parse Push Plugin library with Ionic2/Angular2:
1) Download the library from github.
git clone https://github.com/taivo/parse-push-plugin
2) You do not import this library like you do things from ionic/native or node_module libraries. In any component that you would like to use it simply do this below your imports in the given ts file:
declare var ParsePushPlugin: any;
From here you are ready to go and ParsePushPlugin has all of the capabilities outlined in the docs.
I'm using NS 2.3.0 and when I start tns run android (and iOS too), there is an error that says:
Processing node_modules failed. SyntaxError:/Users/ledinh/Smarp/node_modules/npm/node_modules/read-package-tree/test/fixtures/empty/node_modules/foo/package.json: Unexpected end of input
This was actually happening to me since 2.2, updating to 2.3 does not solve problem. Even the tns doctor said that no issues were detected. Any help would be much appreciated.
EDIT: Here is my package.json
{
"devDependencies": {
"babel-traverse": "6.15.0",
"babel-types": "6.15.0",
"babylon": "6.9.2",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.2.3",
"typescript": "^1.7.5"
},
"nativescript": {
"id": "com.smarpsocial.smarpshare",
"tns-ios": {
"version": "2.3.0"
},
"tns-android": {
"version": "2.3.0"
}
},
"scripts": {
"dummy": "echo yay",
"ios": "xcproj --project platforms/ios/SmarpShare.xcodeproj touch; xcproj --project platforms/ios/Pods/Pods.xcodeproj touch; tns livesync ios --emulator --watch",
"test-json-schema": "echo 'Not yet implemented';exit 1;"
},
"dependencies": {
"app-data": "file:setup_assets/plugins/app-data",
"jed": "1.1.0",
"moment": "^2.10.6",
"nativescript-appversion": "^1.1.2",
"nativescript-appwidget": "file:setup_assets/plugins/nativescript-appwidget",
"nativescript-clipboard": "^1.1.3",
"nativescript-facebook-login": "^0.2.0",
"nativescript-fresco": "file:setup_assets/plugins/nativescript-fresco",
"nativescript-iqkeyboardmanager": "^1.0.1",
"nativescript-logEntries": "^1.0.0",
"nativescript-pulltorefresh": "^1.1.0",
"nativescript-push-notifications": "0.0.15",
"nativescript-snackbar": "^1.0.3",
"nativescript-timedatepicker": "file:setup_assets/plugins/timedatepicker",
"nativescript-zendesk": "file:setup_assets/plugins/nativescript-zendesk",
"simple-text-parser": "1.0.0",
"tns-core-modules": "^2.3.0",
"util": "~0.10.3"
}
}
EDIT 2: I created a sample app and it works, but not for my app
I suspect it's because the platforms / tns-core-modules packages in your app have a lower version than what's specified in package.json.
Can you try following these instructions? So:
$ tns platform remove android
$ tns platform add android
$ tns platform remove ios
$ tns platform add android
$ npm install tns-core-modules#latest --save
I'm building a NativeScript app. For implementing Drawer, I'm trying to use 'Telerik NativeScript UI' plugin. But, something is not working after installing the plugin & my NativeScript build is getting failed.
Here are 2 screenshots of the build failed.
My package.json file content
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.testapp",
"tns-android": {
"version": "2.0.0"
}
},
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/platform-server": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"nativescript-angular": "0.1.1",
"nativescript-telerik-ui": "^1.1.1",
"tns-core-modules": "^2.0.0"
},
"devDependencies": {
"babel-traverse": "6.9.0",
"babel-types": "6.10.2",
"babylon": "6.8.1",
"filewalker": "0.1.2",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.3.2",
"typescript": "^1.8.10"
}
}
My NativeScript CLI version is 2.0.1
Any idea, what's probably going wrong ?
-------It's fixed-------
The solution is, after getting the error..
Don't remove the plugin
Remove the platform(android/ios)
Add the platform once again(android/ios)
Rebuild the app
Try
platform remove android
and then
platform add android
tns run android
I have had this issue every time I try to add a new plugin to nativescript (e.g the phone, telerik-UI, and contact plugins). What worked for me was just navigating into platform > android and then running gradlew clean. This way you wouldn't have to re-add the android platform every time you add a plugin.