Migrate component + test App to NativeScript 8.3

app/App_Resources/Android/AndroidManifest.xml

@@ -29,7 +29,8 @@
 			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
 			android:configChanges="keyboardHidden|orientation|screenSize"
-			android:theme="@style/LaunchScreenTheme">
+			android:theme="@style/LaunchScreenTheme"
+			android:exported="true">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
 

app/App_Resources/Android/app.gradle

@@ -5,12 +5,12 @@
 //	compile 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
+android {
+  defaultConfig {
     generatedDensities = []
-    applicationId = "org.nativescript.nativescriptpackagr"  
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+    applicationId = "org.nativescript.nativescriptpackagr"
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

app/app-routing.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptRouterModule } from "@nativescript/angular";
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
-    { path: "home", loadChildren: "./home/home.module#HomeModule" }
+    { path: "home",  loadChildren: () => import("~/home/home.module").then((m) => m.HomeModule) },
 ];
 
 @NgModule({

app/app.css

@@ -1,78 +1,69 @@
-/*
-In NativeScript, the app.css file is where you place CSS rules that
-you would like to apply to your entire application. Check out
-http://docs.nativescript.org/ui/styling for a full list of the CSS
-selectors and properties you can use to style UI components.
-
-/*
-In many cases you may want to use the NativeScript core theme instead
-of writing your own CSS rules. For a full list of class names in the theme
-refer to http://docs.nativescript.org/ui/theme.
-*/
-@import '~nativescript-theme-core/css/core.light.css';
-
-/*
-For example, the following CSS rule changes the font size of all UI
-components that have the btn class name.
-*/
-.btn {
-    font-size: 18;
-}
-.slide-1{
-    background-color: #448AFF;
-  }
-
-  .slide-2{
-    background-color: #F44336;
-  }
-  .slide-3{
-    background-color: #8BC34A;
-  }
-
-  .slide-4{
-    background-color: #9C27B0;
-  }
-  .slide-5{
-    background-color: #FFC107;
-  }
-
-  .slide-6{
-    background-color: #448AFF;
-  }
-
-  .slide-7{
-    background-color: #F44336;
-  }
-  .slide-8{
-    background-color: #8BC34A;
-  }
-
-  .slide-9{
-    background-color: #9C27B0;
-  }
-  .slide-10{
-    background-color: #FFC107;
-  }
-
-
-  .slide-indicator-inactive{
-      background-color: #fff;
-      opacity : 0.4;
-      width : 10;
-      height : 10;
-      margin-left : 2.5;
-      margin-right : 2.5;
-      margin-top : 0;
-      border-radius : 5;
-  }
-
-  .slide-indicator-active{
-      background-color: #fff;
-      opacity : 0.9;
-      width : 10;
-      height : 10;
-      margin-left : 2.5;
-      margin-right : 2.5;
-      margin-top : 0;
-      border-radius : 5;
-  }
+@import '@nativescript/theme/css/core.css';
+@import '@nativescript/theme/css/default.css';
+
+
+/*
+For example, the following CSS rule changes the font size of all UI
+components that have the btn class name.
+*/
+.btn {
+  font-size: 18;
+}
+.slide-1{
+  background-color: #448AFF;
+}
+
+.slide-2{
+  background-color: #F44336;
+}
+.slide-3{
+  background-color: #8BC34A;
+}
+
+.slide-4{
+  background-color: #9C27B0;
+}
+.slide-5{
+  background-color: #FFC107;
+}
+
+.slide-6{
+  background-color: #448AFF;
+}
+
+.slide-7{
+  background-color: #F44336;
+}
+.slide-8{
+  background-color: #8BC34A;
+}
+
+.slide-9{
+  background-color: #9C27B0;
+}
+.slide-10{
+  background-color: #FFC107;
+}
+
+
+.slide-indicator-inactive{
+  background-color: #fff;
+  opacity : 0.4;
+  width : 10;
+  height : 10;
+  margin-left : 2.5;
+  margin-right : 2.5;
+  margin-top : 0;
+  border-radius : 5;
+}
+
+.slide-indicator-active{
+  background-color: #fff;
+  opacity : 0.9;
+  width : 10;
+  height : 10;
+  margin-left : 2.5;
+  margin-right : 2.5;
+  margin-top : 0;
+  border-radius : 5;
+}

app/app.module.ts

@@ -1,5 +1,5 @@
-import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "@nativescript/angular";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";

app/home/home-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptRouterModule } from "@nativescript/angular";
 
 import { HomeComponent } from "./home.component";
 

app/home/home.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NativeScriptCommonModule } from "@nativescript/angular";
 
 import { HomeRoutingModule } from "./home-routing.module";
 import { HomeComponent } from "./home.component";

app/main.aot.ts

@@ -1,5 +1,5 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
-import { platformNativeScript } from "nativescript-angular/platform-static";
+import { platformNativeScript } from "@nativescript/angular";
 
 import { AppModuleNgFactory } from "./app.module.ngfactory";
 

app/main.ts

@@ -1,6 +1,8 @@
-// this import should be first in order to load some required settings (like globals and reflect-metadata)
-import { platformNativeScriptDynamic } from "nativescript-angular/platform";
+import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
 
-import { AppModule } from "./app.module";
+import { AppModule } from './app.module';
+
+runNativeScriptAngularApp({
+  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
+});
 
-platformNativeScriptDynamic().bootstrapModule(AppModule);

app/polyfills.ts

@@ -0,0 +1,20 @@
+/**
+ * NativeScript Polyfills
+ */
+
+// Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
+import '@nativescript/core/globals';
+// Install @nativescript/angular specific polyfills
+import '@nativescript/angular/polyfills';
+
+/**
+ * Zone.js and patches
+ */
+// Add pre-zone.js patches needed for the NativeScript platform
+import '@nativescript/zone-js/dist/pre-zone-polyfills';
+
+// Zone JS is required by default for Angular itself
+import 'zone.js';
+
+// Add NativeScript specific Zone JS patches
+import '@nativescript/zone-js';

lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/public_api.ts"
+    },
+    "dest": "../dist/"
+}

lib/package.json

@@ -18,12 +18,5 @@
   "peerDependencies": {
     "@angular/core": ">=6.0.0",
     "@angular/common": ">=6.0.0"
-  },
-  "ngPackage": {
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-      "entryFile": "src/public_api.ts"
-    },
-    "dest": "../dist/"
   }
 }

lib/src/slide/slide.component.ts

@@ -7,8 +7,8 @@ import {
   EventEmitter,
   ViewEncapsulation
 } from "@angular/core";
-import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
-import * as gestures from "tns-core-modules/ui/gestures";
+import { StackLayout } from '@nativescript/core';
+import * as gestures from '@nativescript/core/ui/gestures';
 
 @Component({
   selector: "slide",