Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.7k
Migrating Plugins to NativeScript 3.0
This is a step by step guide on how to migrate plugins to NativeScript 3.0
Refer to theModules30Changes guide which describes breaking changes in the NativeScript 3.0 release.
You can use the following already migrated plugins for reference:
UpdatedevDependencies
totns-core-modules
,tns-platform-declarations
(if needed) andnativescript-telerik-ui
(if needed).
"devDependencies": { ... "tns-core-modules": "^3.0.0 || ^3.0.0-rc.1", "tns-platform-declarations": "^3.0.0 || ^3.0.0-rc.1", "typescript": "^2.2.2", "nativescript-telerik-ui":"^1.7.0" // only if needed },
UpdatepeerDependencies
. It is recommended to add a peer-dependency totns-core-modules
version 3. This will ensure the current applications that use your plugin will not accidentally update the plugin before migrating the whole project to NativeScript 3.0.
"peerDependencies": { ... "tns-core-modules": "^3.0.0 || ^3.0.0-rc.1", "nativescript-telerik-ui":"^1.7.0" // only if needed}
Make sure there is"nativescript"
section in thepackage.json
. This is recommended for all NativeScript plugins:
"nativescript": { "platforms": { "android": "3.0.0", "ios": "3.0.0" }}
Make sure there is an"author"
section:
"author": { "name": "NativeScript Team" }
Update tsconfig.json according toModules30Changes guide. Here is a "replace all"tsconfg.json
:
{ "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "sourceMap": false, "declaration": false, "noLib": false, "noEmitHelpers": true, "experimentalDecorators": true, "lib": [ "es6", "dom" ], "baseUrl": ".", "paths": { "*": [ "./node_modules/tns-core-modules/*", "./node_modules/*" ] } }, "exclude": [ "node_modules", "platforms" ]}
Check thereferences.d.ts
file (if such exists) and remove entries pointing to../node_modules/tns-core-modules/tns-core-modules.XXXX
- they are not needed any more.You can delete the file if there are no other entries.
There might be references to thetns-platform-declaration
module which are OK. For example:
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
Run typescript compiler. If there are more configuration-related issues - please share them with us (ex. in slack) so that we can update the guide.1. 1.
Fix breaking code using thebreaking changes document. If there are changes you made that weren't described in the document - please add them for future generations.
Updatepackage.json
,tsconfig.json
andreferences.d.ts
as described before.Make sure the project builds and runs successfully. Again you might have to change some of the code if it is affected byt the breaking changes.
If there is an angular demo project there are some additional steps.
Update angular-related dependencies. You can use thecamera module ng project as a reference.
Update webpack plugin. The easiest way:
- Delete all webpack.js file in the root of the project. List of all webpack related files:
- ./webpack.common.js
- ./webpack.android.js
- ./webpack.ios.js
- ./app/vendor.ts
- ./app/vendor-platform.android.ts
- ./app/vendor-platform.ios.ts
- Delete all webpack related scripts in the "scripts" section of the project's package.json ("start-android-bundle", "prestart-android-bundle", "build-android-bundle", etc.)
- Delete tsconfig.aot.json (if there is such) from the root of the project
- Remove and re-install the "nativescript-dev-webpack" package, it will add webpack config files and update package.json with some scripts:
rm -rf node_modules/nativescript-dev-webpack/npm i --save-dev nativescript-dev-webpack
Run them with "tns run android/ios"For testing webpack - use "npm run start-android-bundle"/"npm run start-ios-bundle" scripts. Update angular dependencies:
"dependencies": { "@angular/common": "~4.0.1", "@angular/compiler": "~4.0.1", "@angular/core": "~4.0.1", "@angular/forms": "~4.0.1", "@angular/http": "~4.0.1", "@angular/platform-browser": "~4.0.1", "@angular/platform-browser-dynamic": "~4.0.1", "@angular/router": "~4.0.1", "nativescript-angular": "rc", "rxjs": "~5.3.0", "zone.js": "~0.8.4" ... }