Skip to content

Commit 6f0314e

Browse files
sis0k0sis0k0
authored
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
1 parent 360695d commit 6f0314e

27 files changed

+3125
-324
lines changed

‎app/app.module.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
2+
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
3+
4+
import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
5+
import { routableComponents, routes } from "./app.routes";
6+
import { NativeScriptRouterModule } from "nativescript-angular/router";
7+
import { NativeScriptFormsModule } from "nativescript-angular/forms";
8+
import { NestedComponent } from "./action-bar/action-bar-nested.component";
9+
import { CustomTemplate } from "./list-view/list-view-item-template";
10+
11+
@NgModule({
12+
declarations: [
13+
NavigationMainPageRouter,
14+
NestedComponent,
15+
CustomTemplate,
16+
...routableComponents,
17+
],
18+
bootstrap: [NavigationMainPageRouter],
19+
imports: [
20+
NativeScriptModule,
21+
NativeScriptFormsModule,
22+
NativeScriptRouterModule,
23+
NativeScriptRouterModule.forRoot(routes),
24+
],
25+
schemas: [NO_ERRORS_SCHEMA],
26+
})
27+
export class AppModule { }
28+

‎app/app.routes.ts

Lines changed: 62 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import { NavigationTestRouter, NavigationSubRoutes } from "./router/router-outle
1111

1212
import { BindingComponent } from "./binding/binding-page";
1313

14-
import { ListViewComponent } from "./listView/commonTemplate/list-view-page";
15-
import { ListViewControlComponent } from "./listView/customTemplate/list-view-item-template";
16-
import { ListViewAsyncPipeComponent } from "./listView/asyncPipeTemplate/async-pipe-template";
17-
import { ListViewMainPageComponent } from "./listView/listViewMainPage/list-view-main-page";
18-
import { ListViewWithNestedTemplateComponent } from "./listView/nestedTemplate/list-view-nested-template";
14+
import { ListViewComponent } from "./list-view/list-view-page";
15+
import { ListViewControlComponent } from "./list-view/list-view-item-template";
16+
import { ListViewAsyncPipeComponent } from "./list-view/async-pipe-template";
17+
import { ListViewMainPageComponent } from "./list-view/list-view-main-page";
18+
import { ListViewWithNestedTemplateComponent } from "./list-view/list-view-nested-template";
1919

20-
import { ListPickerMainPageComponent } from "./listPicker/list-picker-main-page";
21-
import { ListPickerComponent } from "./listPicker/list-picker";
20+
import { ListPickerMainPageComponent } from "./list-picker/list-picker-main-page";
21+
import { ListPickerComponent } from "./list-picker/list-picker";
2222

2323
import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
2424
import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
@@ -29,44 +29,72 @@ import { NavigationOptionsComponent } from "./navigation-options/navigation-opti
2929
import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
3030
import { MainComponent } from "./main/main-page-router-outlet";
3131

32-
export var routableComponents = [];
32+
export const routableComponents = [
33+
MainComponent,
34+
ModalContent,
35+
AppComponent,
36+
37+
NavigationTestRouter,
38+
39+
FirstComponent,
40+
SecondComponent,
41+
42+
FirstComponentActionBar,
43+
SecondComponentActionBar,
44+
45+
BindingComponent,
46+
47+
ListViewMainPageComponent,
48+
ListViewComponent,
49+
ListViewControlComponent,
50+
ListViewAsyncPipeComponent,
51+
ListViewWithNestedTemplateComponent,
52+
53+
ListPickerComponent,
54+
ListPickerMainPageComponent,
55+
56+
ModalViewMainPageComponent,
57+
ModalTest,
58+
ModalTestWithPushStrategy,
59+
60+
TabViewComponent,
61+
62+
NavigationOptionsComponent,
63+
NavigationInfoComponent,
64+
];
3365

3466
// Set isNavigatable: true if the page is a mian page to other sub pages
3567
export const routes = [
36-
routeEntry({ path: '', component: MainComponent, data: { title: "" } }),
37-
routeEntry({ path: '', component: ModalContent, data: { title: "" } }),
38-
routeEntry({ path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} }),
68+
{ path: '', component: MainComponent, data: { title: "" } },
69+
{ path: '', component: ModalContent, data: { title: "" } },
70+
{ path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} },
3971

40-
routeEntry({ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} }),
72+
{ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} },
4173

42-
routeEntry({ path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} }),
43-
routeEntry({ path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} }),
74+
{ path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} },
75+
{ path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} },
4476

45-
routeEntry({ path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true} }),
46-
routeEntry({ path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true} }),
77+
{ path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true} },
78+
{ path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true} },
4779

48-
routeEntry({ path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true} }),
80+
{ path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true} },
4981

50-
routeEntry({ path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true} }),
51-
routeEntry({ path: "ListViewExamples/commonTemplate", component: ListViewComponent, data: { title: "commonTemplate" } }),
52-
routeEntry({ path: "ListViewExamples/customTemplate", component: ListViewControlComponent, data: { title: "customTemplate" } }),
53-
routeEntry({ path: "listView/asyncPipeTemplate", component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } }),
54-
routeEntry({ path: "listView/nestedTemplate", component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } }),
82+
{ path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true} },
83+
{ path: "ListViewExamples/commonTemplate", component: ListViewComponent, data: { title: "commonTemplate" } },
84+
{ path: "ListViewExamples/customTemplate", component: ListViewControlComponent, data: { title: "customTemplate" } },
85+
{ path: "listView/asyncPipeTemplate", component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } },
86+
{ path: "listView/nestedTemplate", component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } },
5587

56-
routeEntry({ path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } }),
57-
routeEntry({ path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } }),
88+
{ path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } },
89+
{ path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } },
5890

59-
routeEntry({ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} }),
60-
routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
61-
routeEntry({ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),
91+
{ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} },
92+
{ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } },
93+
{ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } },
6294

63-
routeEntry({ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } }),
95+
{ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
6496

65-
routeEntry({ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} }),
66-
routeEntry({ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } }),
97+
{ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} },
98+
{ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } },
6799
];
68100

69-
function routeEntry(data) {
70-
routableComponents.push(data.component)
71-
return data;
72-
}

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

File renamed without changes.

‎app/listPicker/list-picker.css renamed to ‎app/list-picker/list-picker.css

File renamed without changes.

‎app/listPicker/list-picker.ts renamed to ‎app/list-picker/list-picker.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component,Input, ChangeDetectionStrategy } from '@angular/core';
22

33
@Component({
44
selector: 'list',
5-
styleUrls: ['./listPicker/list-picker.css'],
5+
styleUrls: ['./list-picker.css'],
66
template: `
77
<StackLayout automationText="listPicker" >
88
<ListPicker #picker class="listPicker"
@@ -17,6 +17,7 @@ import { Component,Input, ChangeDetectionStrategy } from '@angular/core';
1717
export class ListPickerComponent {
1818
public pokemons: Array<string>;
1919
public picked: string;
20+
public selectedIndex: number;
2021

2122
private pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
2223
"Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];
@@ -33,4 +34,4 @@ export class ListPickerComponent {
3334
console.log("picker selection: " + picker.selectedIndex);
3435
this.picked = this.pokemons[picker.selectedIndex];
3536
}
36-
}
37+
}

‎app/listView/asyncPipeTemplate/async-pipe-template.ts renamed to ‎app/list-view/async-pipe-template.ts

File renamed without changes.

‎app/listView/customTemplate/list-view-item-template.ts renamed to ‎app/list-view/list-view-item-template.ts

File renamed without changes.

‎app/listView/listViewMainPage/list-view-main-page.ts renamed to ‎app/list-view/list-view-main-page.ts

File renamed without changes.

‎app/listView/nestedTemplate/list-view-nested-template.ts renamed to ‎app/list-view/list-view-nested-template.ts

File renamed without changes.

‎app/listView/commonTemplate/list-view-page.css renamed to ‎app/list-view/list-view-page.css

File renamed without changes.

‎app/listView/commonTemplate/list-view-page.ts renamed to ‎app/list-view/list-view-page.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
22

33
@Component({
44
selector: 'list-test',
5-
styleUrls: ['./listView/commonTemplate/list-view-page.css'],
5+
styleUrls: ['./list-view-page.css'],
66
template: `
77
<StackLayout automationText="mainView">
88
<ListView [items]="myItems" (itemTap)="onItemTap($event)">

‎app/main.aot.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { platformNativeScript } from "nativescript-angular/platform-static";
2+
3+
import { AppModuleNgFactory } from "./app.module.ngfactory";
4+
5+
platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

‎app/main.ts

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,5 @@
1-
// this import should be first in order to load some required settings (like globals and reflect-metadata)
21
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
3-
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
4-
import { NgModule } from "@angular/core";
5-
import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
6-
import { routableComponents, routes } from "./app.routes";
7-
import { NativeScriptRouterModule } from "nativescript-angular/router";
8-
import { NativeScriptFormsModule } from "nativescript-angular/forms";
9-
import { NestedComponent } from "./action-bar/action-bar-nested.component";
10-
import { CustomTemplate } from "./listView/customTemplate/list-view-item-template";
112

12-
@NgModule({
13-
declarations: [
14-
NavigationMainPageRouter,
15-
NestedComponent,
16-
CustomTemplate,
17-
...routableComponents
18-
],
19-
bootstrap: [NavigationMainPageRouter],
20-
imports: [
21-
NativeScriptModule,
22-
NativeScriptFormsModule,
23-
NativeScriptRouterModule,
24-
NativeScriptRouterModule.forRoot(routes),
25-
],
26-
})
27-
class AppComponentModule { }
3+
import { AppModule } from "./app.module";
284

29-
platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
5+
platformNativeScriptDynamic().bootstrapModule(AppModule);

‎app/navigation-options/navigation-info.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {Frame} from "ui/frame";
1616
`
1717
})
1818
export class NavigationInfoComponent {
19-
private frameStack: number = -1;
20-
private locationStack: number = -1;
19+
public frameStack: number = -1;
20+
public locationStack: number = -1;
2121

2222
constructor(private frame: Frame, private strategy: NSLocationStrategy) { }
2323

‎app/navigation-options/navigation-options.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {RouterExtensions} from "nativescript-angular/router";
66
template: `
77
<StackLayout>
88
<Button text="clear-history" [nsRouterLink]="['/nav-info']" [clearHistory]="true"></Button>
9-
<Button text="page-trasnitions" (tap)="flipToNextPage()"></Button>
9+
<Button text="page-transitions" (tap)="flipToNextPage()"></Button>
1010
</StackLayout>
1111
`
1212
})

‎app/package.json

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
11
{
2-
"nativescript": {
3-
"id": "org.nativescript.helloworldng"
4-
},
5-
"name": "tns-template-hello-world-ng",
6-
"main": "main.js",
7-
"version": "2.0.1",
8-
"author": "Telerik <[email protected]>",
9-
"description": "Nativescript Angular Hello World template",
10-
"license": "BSD",
11-
"keywords": [
12-
"telerik",
13-
"mobile",
14-
"angular",
15-
"nativescript",
16-
"{N}",
17-
"tns",
18-
"appbuilder",
19-
"template"
20-
],
21-
"repository": {
22-
"type": "git",
23-
"url": "git://github.com/NativeScript/template-hello-world-ng"
24-
},
25-
"homepage": "https://github.com/NativeScript/template-hello-world-ng",
26-
"android": {
27-
"v8Flags": "--expose_gc"
28-
},
29-
"dependencies": {
30-
"angular2": "2.0.0-beta.16",
31-
"nativescript-angular": "0.0.46",
32-
"tns-core-modules": "^2.0.0 || 2.0.0-angular-6"
33-
},
34-
"devDependencies": {
35-
"nativescript-dev-typescript": "^0.3.2"
36-
}
2+
"android": {
3+
"v8Flags": "--expose_gc"
4+
},
5+
"main": "main.js",
6+
"name": "tns-template-hello-world-ng",
7+
"version": "3.0.0"
378
}

‎app/router/router-outlet.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {SecondComponent} from "../components/second.component";
44

55
@Component({
66
selector: 'navigation-test',
7-
styleUrls: ['./router/router-outlet.css'],
7+
styleUrls: ['./router-outlet.css'],
88
template: `
99
<StackLayout>
1010
<StackLayout class="nav">

‎app/template/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Component} from "@angular/core";
33
@Component({
44
selector: "my-app",
55
styles: ["button {color: lime}"],
6-
styleUrls: ["./template/app.component.css"],
6+
styleUrls: ["./app.component.css"],
77
template: `
88
<StackLayout>
99
<Label text="Tap the button" class="title"></Label>

‎app/vendor-platform.android.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Resolve JavaScript classes that extend a Java class, and need to resolve
2+
// their JavaScript module from a bundled script. For example:
3+
// NativeScriptApplication, NativeScriptActivity, etc.
4+
//
5+
// This module gets bundled together with the rest of the app code and the
6+
// `require` calls get resolved to the correct bundling import call.
7+
//
8+
// At runtime the module gets loaded *before* the rest of the app code, so code
9+
// placed here needs to be careful about its dependencies.
10+
11+
require("application");
12+
require("ui/frame");
13+
require("ui/frame/activity");
14+
15+
if (global.TNS_WEBPACK) {
16+
global.__requireOverride = function (name, dir) {
17+
if (name === "./tns_modules/application/application.js") {
18+
return require("application");
19+
} else if (name === "./tns_modules/ui/frame/frame.js") {
20+
return require("ui/frame");
21+
} else if (name === "./tns_modules/ui/frame/activity.js") {
22+
return require("ui/frame/activity");
23+
}
24+
};
25+
}

‎app/vendor-platform.ios.ts

Whitespace-only changes.

‎app/vendor.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
require("./vendor-platform");
2+
3+
require("reflect-metadata");
4+
require("@angular/platform-browser");
5+
require("@angular/core");
6+
require("@angular/common");
7+
require("@angular/forms");
8+
require("@angular/http");
9+
require("@angular/router");
10+
11+
require("nativescript-angular/platform-static");
12+
require("nativescript-angular/forms");
13+
require("nativescript-angular/router");

0 commit comments

Comments
 (0)