Skip to content

Commit 4b89428

Browse files
NathanWalkerNathanWalker
authored
fix: ng13 routing (#47)
1 parent 292cbfc commit 4b89428

32 files changed

+446
-10945
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,5 @@ packages/angular/dist
4343
# System Files
4444
.DS_Store
4545
Thumbs.db
46+
47+
.angular

‎README.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,32 @@ For usage with NativeScript for Angular 12+ projects.
55
Clean and setup workspace:
66

77
```
8-
yarn clean.all
8+
npm run clean.all
99
```
1010

1111
## Build packages:
1212

1313
```
14-
yarn build
14+
npm run build
1515
```
1616

1717
## Run demo:
1818

1919
```
20-
nx run nativescript-demo-ng:ios
20+
npm run demo.ios
21+
// or...
22+
npm run demo.android
23+
```
24+
25+
## Clean/Reset demo dependencies
26+
27+
```
28+
npm run demo.clean
2129
```
2230

2331
## Unit tests for iOS and Android:
2432

2533
```
26-
yarn test.android
27-
yarn test.ios
34+
npm run test.android
35+
npm run test.ios
2836
```

‎apps/nativescript-demo-ng/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
},
88
"dependencies": {
99
"@nativescript/angular": "file:../../packages/angular",
10-
"@nativescript/core": "file:../../node_modules/@nativescript/core"
10+
"@nativescript/core": "file:../../node_modules/@nativescript/core",
11+
"@nativescript-community/ui-material-bottom-navigation": "^6.2.5"
1112
},
1213
"devDependencies": {
1314
"@nativescript/android": "~8.1.1",

‎apps/nativescript-demo-ng/src/app/app-routing.module.ts

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,44 @@
11
import { NgModule } from '@angular/core';
2-
import { NativeScriptRouterModule } from '@nativescript/angular';
2+
import { NativeScriptRouterModule, NSEmptyOutletComponent } from '@nativescript/angular';
33
import { Routes } from '@angular/router';
44

55
import { ItemsComponent } from './item/items.component';
66
import { ItemDetailComponent } from './item/item-detail.component';
7+
// import { HomeComponent } from './home/home.component';
8+
// import { BootGuardService } from './boot-guard.service';
79

810
const routes: Routes = [
9-
{ path: '', redirectTo: '/items', pathMatch: 'full' },
11+
{ path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
1012
{ path: 'items', component: ItemsComponent },
11-
{ path: 'item/:id', component: ItemDetailComponent }
13+
{ path: 'item/:id', component: ItemDetailComponent },
14+
{ path: 'item2', loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module) },
15+
{ path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
16+
17+
/**
18+
* Test tab named outlets
19+
*/
20+
// { path: '', redirectTo: '/home', pathMatch: 'full' },
21+
// {
22+
// path: 'home',
23+
// component: HomeComponent,
24+
// canActivate: [BootGuardService],
25+
// children: [
26+
// {
27+
// path: 'start',
28+
// component: NSEmptyOutletComponent,
29+
// loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module),
30+
// outlet: 'startTab',
31+
// },
32+
// ],
33+
// },
34+
// {
35+
// path: 'item2',
36+
// loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module),
37+
// },
1238
];
1339

1440
@NgModule({
1541
imports: [NativeScriptRouterModule.forRoot(routes)],
16-
exports: [NativeScriptRouterModule]
42+
exports: [NativeScriptRouterModule],
1743
})
1844
export class AppRoutingModule {}

‎apps/nativescript-demo-ng/src/app/app.module.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,28 @@ import { ItemsComponent } from './item/items.component';
77
import { ItemDetailComponent } from './item/item-detail.component';
88
import { ModalComponent } from './modal/modal.component';
99

10+
/**
11+
* To test tab named outlets, can uncomment imports and declarations
12+
*/
13+
// import { HomeComponent } from './home/home.component';
14+
// import { NativeScriptMaterialBottomNavigationModule } from '@nativescript-community/ui-material-bottom-navigation/angular';
15+
1016
@NgModule({
1117
bootstrap: [AppComponent],
12-
imports: [NativeScriptModule, NativeScriptHttpClientModule, AppRoutingModule, NativeDialogModule],
13-
declarations: [AppComponent, ItemsComponent, ItemDetailComponent, ModalComponent],
18+
imports: [
19+
NativeScriptModule,
20+
NativeScriptHttpClientModule,
21+
AppRoutingModule,
22+
NativeDialogModule,
23+
// NativeScriptMaterialBottomNavigationModule
24+
],
25+
declarations: [
26+
AppComponent,
27+
ItemsComponent,
28+
ItemDetailComponent,
29+
ModalComponent,
30+
// HomeComponent
31+
],
1432
providers: [],
1533
schemas: [NO_ERRORS_SCHEMA],
1634
})

‎apps/nativescript-demo-ng/src/app/boot-guard.service.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Injectable } from '@angular/core';
2+
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanLoad, Route, Router } from '@angular/router';
3+
4+
@Injectable({
5+
providedIn: 'root',
6+
})
7+
export class BootGuardService implements CanActivate, CanLoad {
8+
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
9+
return new Promise((resolve) => {
10+
resolve(true);
11+
});
12+
}
13+
14+
public canLoad(route: Route): Promise<boolean> {
15+
return this.canActivate(null, null);
16+
}
17+
}

‎apps/nativescript-demo-ng/src/app/home/home.component.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<GridLayout rows="*" columns="*">
2+
<MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
3+
<MDTabStrip class="c-tabs">
4+
<MDTabStripItem class="tabstripitem">
5+
<Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
6+
</MDTabStripItem>
7+
</MDTabStrip>
8+
9+
<MDTabContentItem backgroundColor="transparent">
10+
<GridLayout>
11+
<page-router-outlet actionBarVisibility="never" name="startTab"></page-router-outlet>
12+
</GridLayout>
13+
</MDTabContentItem>
14+
</MDBottomNavigation>
15+
</GridLayout>

‎apps/nativescript-demo-ng/src/app/home/home.component.ts

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Component, NgZone } from '@angular/core';
2+
import { ActivatedRoute, Router } from '@angular/router';
3+
import { RouterExtensions } from '@nativescript/angular';
4+
import { Page, TabView } from '@nativescript/core';
5+
6+
@Component({
7+
moduleId: module.id,
8+
selector: 'demo-home',
9+
templateUrl: './home.component.html',
10+
})
11+
export class HomeComponent {
12+
tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};
13+
private _tabs = ['start'];
14+
private _hasInitTab: { start?: boolean } = {};
15+
16+
constructor(
17+
private _ngZone: NgZone,
18+
// vcRef: ViewContainerRef,
19+
private _activeRoute: ActivatedRoute,
20+
private _page: Page,
21+
private _ngRouter: Router,
22+
private _router: RouterExtensions
23+
) {
24+
this._initMenu();
25+
}
26+
27+
ngOnInit() {
28+
this._viewTab(0);
29+
}
30+
31+
private _tabView;
32+
onIndexChanged(e) {
33+
if (e && e.object) {
34+
this._tabView = <TabView>e.object;
35+
}
36+
}
37+
38+
loadedTabView(args) {}
39+
40+
private _viewTab(index: number) {
41+
let route;
42+
switch (index) {
43+
case 0:
44+
if (!this._hasInitTab.start) {
45+
this._hasInitTab.start = true;
46+
route = { outlets: { startTab: ['start'] } };
47+
}
48+
break;
49+
}
50+
51+
console.log('tab index changed:', index);
52+
this._ngZone.run(() => {
53+
if (route) {
54+
this._router.navigate([route], {
55+
animated: false,
56+
relativeTo: this._activeRoute,
57+
});
58+
}
59+
});
60+
}
61+
62+
private _initMenu(profilePic?: string) {
63+
for (let i = 0; i < this._tabs.length; i++) {
64+
const tab = this._tabs[i];
65+
// console.log('================')
66+
// console.log(tab)
67+
// console.log(i);
68+
// console.log(tab);
69+
let title = '';
70+
switch (tab) {
71+
case 'start':
72+
title = 'Start Tab';
73+
break;
74+
}
75+
this.tabItems[tab] = {
76+
index: i,
77+
title,
78+
textTransform: 'capitalize',
79+
};
80+
}
81+
}
82+
}

‎apps/nativescript-demo-ng/src/app/item/items.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</StackLayout>
3333
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
3434
<ng-template let-item="item">
35-
<StackLayout [nsRouterLink]="['/item', item.id]" padding="10">
35+
<StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
3636
<Label [text]="item.name" class="list-group-item"></Label>
3737
</StackLayout>
3838
</ng-template>

‎apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<ActionBar title="Details" class="action-bar"></ActionBar>
2+
<FlexboxLayout flexDirection="column" class="page">
3+
<FlexboxLayout class="m-15">
4+
<Label class="h2" [text]="item.id + '. '"></Label>
5+
<Label class="h2" [text]="item.name"></Label>
6+
</FlexboxLayout>
7+
<Label class="h4" [text]="item.role"></Label>
8+
<Button text="GO BACK!" (tap)="goBack()"></Button>
9+
</FlexboxLayout>

‎apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { RouterExtensions } from '@nativescript/angular';
4+
5+
import { Item } from '../item/item';
6+
import { ItemService } from '../item/item.service';
7+
8+
@Component({
9+
selector: 'ns-details2',
10+
moduleId: module.id,
11+
templateUrl: './item-detail2.component.html',
12+
})
13+
export class ItemDetailComponent implements OnInit {
14+
item: Item;
15+
16+
constructor(private itemService: ItemService, private route: ActivatedRoute, private router: RouterExtensions) {
17+
console.log('ItemDetail2Component construct');
18+
}
19+
20+
ngOnInit(): void {
21+
const id = +this.route.snapshot.params.id;
22+
this.item = this.itemService.getItem(id);
23+
}
24+
25+
goBack() {
26+
if (this.router.canGoBackToPreviousPage()) {
27+
this.router.backToPreviousPage();
28+
} else if (this.router.canGoBack()) {
29+
this.router.back();
30+
}
31+
}
32+
33+
ngOnDestroy() {
34+
console.log('ItemDetail2Component ngOnDestroy');
35+
}
36+
}

‎apps/nativescript-demo-ng/src/app/item2/item2-routing.module.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { NativeScriptRouterModule } from '@nativescript/angular';
3+
import { Routes } from '@angular/router';
4+
5+
import { ItemDetailComponent } from './item-detail2.component';
6+
7+
const routes: Routes = [{ path: ':id', component: ItemDetailComponent }];
8+
9+
@NgModule({
10+
imports: [NativeScriptRouterModule.forChild(routes)],
11+
exports: [NativeScriptRouterModule],
12+
})
13+
export class Items2RoutingModule {}

‎apps/nativescript-demo-ng/src/app/item2/item2.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
import { ItemDetailComponent } from './item-detail2.component';
4+
import { Items2RoutingModule } from './item2-routing.module';
5+
6+
@NgModule({
7+
imports: [NativeScriptCommonModule, Items2RoutingModule],
8+
declarations: [ItemDetailComponent],
9+
exports: [Items2RoutingModule],
10+
schemas: [NO_ERRORS_SCHEMA],
11+
})
12+
export class Item2Module {}

‎apps/nativescript-demo-ng/src/app/item3/item3-routing.module.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { NativeScriptRouterModule } from '@nativescript/angular';
3+
import { Routes } from '@angular/router';
4+
5+
import { ItemsComponent } from './items.component';
6+
7+
const routes: Routes = [{ path: '', component: ItemsComponent }];
8+
9+
@NgModule({
10+
imports: [NativeScriptRouterModule.forChild(routes)],
11+
exports: [NativeScriptRouterModule],
12+
})
13+
export class Items2RoutingModule {}

‎apps/nativescript-demo-ng/src/app/item3/item3.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
import { ItemsComponent } from './items.component';
4+
import { Items2RoutingModule } from './item3-routing.module';
5+
6+
@NgModule({
7+
imports: [NativeScriptCommonModule, Items2RoutingModule],
8+
declarations: [ItemsComponent],
9+
exports: [Items2RoutingModule],
10+
schemas: [NO_ERRORS_SCHEMA],
11+
})
12+
export class Item3Module {}

0 commit comments

Comments
 (0)