chore: add demo case for tabbed outlet routing

Author: NathanWalker

.gitignore

@@ -9,6 +9,7 @@
 /node_modules
 /packages/*/node_modules
 package-lock.json
+.npmrc
 
 # IDEs and editors
 /.idea

README.md

@@ -5,24 +5,32 @@ For usage with NativeScript for Angular 12+ projects.
 Clean and setup workspace:
 
 ```
-yarn clean.all
+npm run clean.all
 ```
 
 ## Build packages:
 
 ```
-yarn build
+npm run build
 ```
 
 ## Run demo:
 
 ```
-nx run nativescript-demo-ng:ios
+npm run demo:ios
+// or...
+npm run demo:android
+```
+
+## Clean/Reset demo dependencies
+
+```
+npm run demo:clean
 ```
 
 ## Unit tests for iOS and Android:
 
 ```
-yarn test.android
-yarn test.ios
+npm run test:android
+npm run test:ios
 ```

apps/nativescript-demo-ng/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "@nativescript/angular": "file:../../packages/angular",
-    "@nativescript/core": "file:../../node_modules/@nativescript/core"
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "@nativescript-community/ui-material-bottom-navigation": "file:nativescript-community-ui-material-bottom-navigation-6.1.3-fixed-ios-appearance.tgz"
   },
   "devDependencies": {
     "@nativescript/android": "~8.1.1",

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

@@ -1,16 +1,36 @@
 import { NgModule } from '@angular/core';
-import { NativeScriptRouterModule } from '@nativescript/angular';
+import { NativeScriptRouterModule, NSEmptyOutletComponent } from '@nativescript/angular';
 import { Routes } from '@angular/router';
 
 import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
+import { HomeComponent } from './home/home.component';
+import { BootGuardService } from './boot-guard.service';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
-  { path: 'items', component: ItemsComponent },
-  { path: 'item/:id', component: ItemDetailComponent },
-  { path: 'item2', loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module) },
-  { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
+  // { path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
+  // { path: 'items', component: ItemsComponent },
+  // { path: 'item/:id', component: ItemDetailComponent },
+  // { path: 'item2', loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module) },
+  // { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  {
+    path: 'home',
+    component: HomeComponent,
+    canActivate: [BootGuardService],
+    children: [
+      {
+        path: 'start',
+        component: NSEmptyOutletComponent,
+        loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module),
+        outlet: 'startTab',
+      },
+    ],
+  },
+  {
+    path: 'item2',
+    loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module),
+  },
 ];
 
 @NgModule({

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

@@ -6,11 +6,14 @@ import { AppComponent } from './app.component';
 import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ModalComponent } from './modal/modal.component';
+import { HomeComponent } from './home/home.component';
+
+import { NativeScriptMaterialBottomNavigationModule } from '@nativescript-community/ui-material-bottom-navigation/angular';
 
 @NgModule({
   bootstrap: [AppComponent],
-  imports: [NativeScriptModule, NativeScriptHttpClientModule, AppRoutingModule, NativeDialogModule],
-  declarations: [AppComponent, ItemsComponent, ItemDetailComponent, ModalComponent],
+  imports: [NativeScriptModule, NativeScriptHttpClientModule, AppRoutingModule, NativeDialogModule, NativeScriptMaterialBottomNavigationModule],
+  declarations: [AppComponent, ItemsComponent, ItemDetailComponent, ModalComponent, HomeComponent],
   providers: [],
   schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanLoad, Route, Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BootGuardService implements CanActivate, CanLoad {
+  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+    return new Promise((resolve) => {
+      resolve(true);
+    });
+  }
+
+  public canLoad(route: Route): Promise<boolean> {
+    return this.canActivate(null, null);
+  }
+}

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

@@ -0,0 +1,15 @@
+<GridLayout rows="*" columns="*">
+  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
+    <MDTabStrip class="c-tabs">
+      <MDTabStripItem class="tabstripitem">
+        <Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
+      </MDTabStripItem>
+    </MDTabStrip>
+
+    <MDTabContentItem backgroundColor="transparent">
+      <GridLayout>
+        <page-router-outlet actionBarVisibility="never" name="startTab"></page-router-outlet>
+      </GridLayout>
+    </MDTabContentItem>
+  </MDBottomNavigation>
+</GridLayout>

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

@@ -0,0 +1,82 @@
+import { Component, NgZone } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterExtensions } from '@nativescript/angular';
+import { Page, TabView } from '@nativescript/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'demo-home',
+  templateUrl: './home.component.html',
+})
+export class HomeComponent {
+  tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};
+  private _tabs = ['start'];
+  private _hasInitTab: { start?: boolean } = {};
+
+  constructor(
+    private _ngZone: NgZone,
+    // vcRef: ViewContainerRef,
+    private _activeRoute: ActivatedRoute,
+    private _page: Page,
+    private _ngRouter: Router,
+    private _router: RouterExtensions
+  ) {
+    this._initMenu();
+  }
+
+  ngOnInit() {
+    this._viewTab(0);
+  }
+
+  private _tabView;
+  onIndexChanged(e) {
+    if (e && e.object) {
+      this._tabView = <TabView>e.object;
+    }
+  }
+
+  loadedTabView(args) {}
+
+  private _viewTab(index: number) {
+    let route;
+    switch (index) {
+      case 0:
+        if (!this._hasInitTab.start) {
+          this._hasInitTab.start = true;
+          route = { outlets: { startTab: ['start'] } };
+        }
+        break;
+    }
+
+    console.log('tab index changed:', index);
+    this._ngZone.run(() => {
+      if (route) {
+        this._router.navigate([route], {
+          animated: false,
+          relativeTo: this._activeRoute,
+        });
+      }
+    });
+  }
+
+  private _initMenu(profilePic?: string) {
+    for (let i = 0; i < this._tabs.length; i++) {
+      const tab = this._tabs[i];
+      // console.log('================')
+      // console.log(tab)
+      // console.log(i);
+      // console.log(tab);
+      let title = '';
+      switch (tab) {
+        case 'start':
+          title = 'Start Tab';
+          break;
+      }
+      this.tabItems[tab] = {
+        index: i,
+        title,
+        textTransform: 'capitalize',
+      };
+    }
+  }
+}

apps/nativescript-demo-ng/yarn.lock

@@ -4,14 +4,14 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "clean": "npx rimraf hooks node_modules package-lock.json yarn.lock && yarn",
-    "clean.all": "yarn clean && nx run nativescript-demo-ng:clean",
+    "clean": "npx rimraf hooks node_modules package-lock.json yarn.lock && npm i --legacy-peer-deps",
+    "clean.all": "npm run clean && npm run demo:clean",
     "postinstall": "husky install",
     "nx": "nx",
     "start": "nx serve",
     "build": "nx run zone-js:build && nx run angular:build",
-    "test.android": "nx run nativescript-demo-ng:test --args='--platform=android'",
-    "test.ios": "nx run nativescript-demo-ng:test --args='--platform=ios'",
+    "test:android": "nx run nativescript-demo-ng:test --args='--platform=android'",
+    "test:ios": "nx run nativescript-demo-ng:test --args='--platform=ios'",
     "lint": "nx workspace-lint && nx lint",
     "e2e": "nx e2e",
     "affected:apps": "nx affected:apps",
@@ -29,6 +29,9 @@
     "dep-graph": "nx dep-graph",
     "help": "nx help",
     "workspace-generator": "nx workspace-generator",
+    "demo:android": "nx run nativescript-demo-ng:android",
+    "demo:ios": "nx run nativescript-demo-ng:ios",
+    "demo:clean": "nx run nativescript-demo-ng:clean",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {