refactor: update app to NativeScript 3.0 (#18)

* chore: clean-up app/package.json

* chore: update to NativeScript 3.0

* chore: typo in button text

* refactor: restructure dirs to use only kebab case

* refactor: extract AppModule to separate file

* refactor: stop creating navigatableComponents dynamically

This prevented the app from being AoT compilatable.

* feat: enable webpack + AoT compilation

* chore: use next tags to ns-ng and core modules

Author: sis0k0

app/app.module.ts

@@ -0,0 +1,28 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+
+import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
+import { routableComponents, routes } from "./app.routes";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptFormsModule } from "nativescript-angular/forms";
+import { NestedComponent } from "./action-bar/action-bar-nested.component";
+import { CustomTemplate } from "./list-view/list-view-item-template";
+
+@NgModule({
+    declarations: [
+        NavigationMainPageRouter,
+        NestedComponent,
+        CustomTemplate,
+        ...routableComponents,
+    ],
+    bootstrap: [NavigationMainPageRouter],
+    imports: [
+        NativeScriptModule,
+        NativeScriptFormsModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forRoot(routes),
+    ],
+    schemas: [NO_ERRORS_SCHEMA],
+})
+export class AppModule { }
+

app/app.routes.ts

@@ -11,14 +11,14 @@ import { NavigationTestRouter, NavigationSubRoutes } from "./router/router-outle
 
 import { BindingComponent } from "./binding/binding-page";
 
-import { ListViewComponent } from "./listView/commonTemplate/list-view-page";
-import { ListViewControlComponent } from "./listView/customTemplate/list-view-item-template";
-import { ListViewAsyncPipeComponent } from "./listView/asyncPipeTemplate/async-pipe-template";
-import { ListViewMainPageComponent } from "./listView/listViewMainPage/list-view-main-page";
-import { ListViewWithNestedTemplateComponent } from "./listView/nestedTemplate/list-view-nested-template";
+import { ListViewComponent } from "./list-view/list-view-page";
+import { ListViewControlComponent } from "./list-view/list-view-item-template";
+import { ListViewAsyncPipeComponent } from "./list-view/async-pipe-template";
+import { ListViewMainPageComponent } from "./list-view/list-view-main-page";
+import { ListViewWithNestedTemplateComponent } from "./list-view/list-view-nested-template";
 
-import { ListPickerMainPageComponent } from "./listPicker/list-picker-main-page";
-import { ListPickerComponent } from "./listPicker/list-picker";
+import { ListPickerMainPageComponent } from "./list-picker/list-picker-main-page";
+import { ListPickerComponent } from "./list-picker/list-picker";
 
 import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
 import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
@@ -29,44 +29,72 @@ import { NavigationOptionsComponent } from "./navigation-options/navigation-opti
 import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
 import { MainComponent } from "./main/main-page-router-outlet";
 
-export var routableComponents = [];
+export const routableComponents = [
+    MainComponent,
+    ModalContent,
+    AppComponent,
+
+    NavigationTestRouter,
+
+    FirstComponent,
+    SecondComponent,
+
+    FirstComponentActionBar,
+    SecondComponentActionBar,
+
+    BindingComponent,
+
+    ListViewMainPageComponent,
+    ListViewComponent,
+    ListViewControlComponent,
+    ListViewAsyncPipeComponent,
+    ListViewWithNestedTemplateComponent,
+
+    ListPickerComponent,
+    ListPickerMainPageComponent,
+
+    ModalViewMainPageComponent,
+    ModalTest,
+    ModalTestWithPushStrategy,
+
+    TabViewComponent,
+
+    NavigationOptionsComponent,
+    NavigationInfoComponent,
+];
 
 // Set isNavigatable: true if the page is a mian page to other sub pages
 export const routes = [
-    routeEntry({ path: '', component: MainComponent, data: { title: "" } }),
-    routeEntry({ path: '', component: ModalContent, data: { title: "" } }),
-    routeEntry({ path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} }),
+    { path: '', component: MainComponent, data: { title: "" } },
+    { path: '', component: ModalContent, data: { title: "" } },
+    { path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} },
 
-    routeEntry({ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} }),
+    { path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} },
 
-    routeEntry({ path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} }),
-    routeEntry({ path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} }),
+    { path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} },
+    { path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} },
 
-    routeEntry({ path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true} }),
-    routeEntry({ path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true} }),
+    { path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true} },
+    { path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true} },
 
-    routeEntry({ path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true} }),
+    { path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true} },
 
-    routeEntry({ path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true} }),
-    routeEntry({ path: "ListViewExamples/commonTemplate", component: ListViewComponent, data: { title: "commonTemplate" } }),
-    routeEntry({ path: "ListViewExamples/customTemplate", component: ListViewControlComponent, data: { title: "customTemplate" } }),
-    routeEntry({ path: "listView/asyncPipeTemplate", component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } }),
-    routeEntry({ path: "listView/nestedTemplate", component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } }),
+    { path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true} },
+    { path: "ListViewExamples/commonTemplate", component: ListViewComponent, data: { title: "commonTemplate" } },
+    { path: "ListViewExamples/customTemplate", component: ListViewControlComponent, data: { title: "customTemplate" } },
+    { path: "listView/asyncPipeTemplate", component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } },
+    { path: "listView/nestedTemplate", component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } },
 
-    routeEntry({ path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } }),
-    routeEntry({ path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } }),
+    { path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } },
+    { path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } },
 
-    routeEntry({ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} }),
-    routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
-    routeEntry({ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),
+    { path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} },
+    { path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } },
+    { path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } },
 
-    routeEntry({ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } }),
+    { path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
 
-    routeEntry({ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} }),
-    routeEntry({ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } }),
+    { path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} },
+    { path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } },
 ];
 
-function routeEntry(data) {
-    routableComponents.push(data.component)
-    return data;
-}

app/listPicker/list-picker-main-page.ts renamed to app/list-picker/list-picker-main-page.ts

@@ -2,7 +2,7 @@ import { Component,Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'list',
-    styleUrls: ['./listPicker/list-picker.css'],
+    styleUrls: ['./list-picker.css'],
     template: ` 
                 <StackLayout automationText="listPicker" >
                     <ListPicker #picker class="listPicker"
@@ -17,6 +17,7 @@ import { Component,Input, ChangeDetectionStrategy } from '@angular/core';
 export class ListPickerComponent {
     public pokemons: Array<string>;
     public picked: string;
+    public selectedIndex: number;
 
     private pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
 "Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];
@@ -33,4 +34,4 @@ export class ListPickerComponent {
         console.log("picker selection: " + picker.selectedIndex);
         this.picked = this.pokemons[picker.selectedIndex];
     }
-}
+}