fix: ng13 routing

.gitignore

@@ -43,3 +43,5 @@ packages/angular/dist
 # System Files
 .DS_Store
 Thumbs.db
+
+.angular

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": "^6.2.5"
   },
   "devDependencies": {
     "@nativescript/android": "~8.1.1",

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

@@ -1,18 +1,44 @@
 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: '/items', pathMatch: 'full' },
+  { path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
   { path: 'items', component: ItemsComponent },
-  { path: 'item/:id', component: ItemDetailComponent }
+  { 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) },
+
+  /**
+   * Test tab named outlets
+   */
+  // { 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({
   imports: [NativeScriptRouterModule.forRoot(routes)],
-  exports: [NativeScriptRouterModule]
+  exports: [NativeScriptRouterModule],
 })
 export class AppRoutingModule {}

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

@@ -7,10 +7,28 @@ import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ModalComponent } from './modal/modal.component';
 
+/**
+ * To test tab named outlets, can uncomment imports and declarations
+ */
+// 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/src/app/item/items.component.html

@@ -32,7 +32,7 @@
   </StackLayout>
   <ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
     <ng-template let-item="item">
-      <StackLayout [nsRouterLink]="['/item', item.id]" padding="10">
+      <StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
         <Label [text]="item.name" class="list-group-item"></Label>
       </StackLayout>
     </ng-template>

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

@@ -0,0 +1,9 @@
+<ActionBar title="Details" class="action-bar"></ActionBar>
+<FlexboxLayout flexDirection="column" class="page">
+  <FlexboxLayout class="m-15">
+    <Label class="h2" [text]="item.id + '. '"></Label>
+    <Label class="h2" [text]="item.name"></Label>
+  </FlexboxLayout>
+  <Label class="h4" [text]="item.role"></Label>
+  <Button text="GO BACK!" (tap)="goBack()"></Button>
+</FlexboxLayout>

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RouterExtensions } from '@nativescript/angular';
+
+import { Item } from '../item/item';
+import { ItemService } from '../item/item.service';
+
+@Component({
+  selector: 'ns-details2',
+  moduleId: module.id,
+  templateUrl: './item-detail2.component.html',
+})
+export class ItemDetailComponent implements OnInit {
+  item: Item;
+
+  constructor(private itemService: ItemService, private route: ActivatedRoute, private router: RouterExtensions) {
+    console.log('ItemDetail2Component construct');
+  }
+
+  ngOnInit(): void {
+    const id = +this.route.snapshot.params.id;
+    this.item = this.itemService.getItem(id);
+  }
+
+  goBack() {
+    if (this.router.canGoBackToPreviousPage()) {
+      this.router.backToPreviousPage();
+    } else if (this.router.canGoBack()) {
+      this.router.back();
+    }
+  }
+
+  ngOnDestroy() {
+    console.log('ItemDetail2Component ngOnDestroy');
+  }
+}

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { NativeScriptRouterModule } from '@nativescript/angular';
+import { Routes } from '@angular/router';
+
+import { ItemDetailComponent } from './item-detail2.component';
+
+const routes: Routes = [{ path: ':id', component: ItemDetailComponent }];
+
+@NgModule({
+  imports: [NativeScriptRouterModule.forChild(routes)],
+  exports: [NativeScriptRouterModule],
+})
+export class Items2RoutingModule {}

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

@@ -0,0 +1,12 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+import { ItemDetailComponent } from './item-detail2.component';
+import { Items2RoutingModule } from './item2-routing.module';
+
+@NgModule({
+  imports: [NativeScriptCommonModule, Items2RoutingModule],
+  declarations: [ItemDetailComponent],
+  exports: [Items2RoutingModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class Item2Module {}

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { NativeScriptRouterModule } from '@nativescript/angular';
+import { Routes } from '@angular/router';
+
+import { ItemsComponent } from './items.component';
+
+const routes: Routes = [{ path: '', component: ItemsComponent }];
+
+@NgModule({
+  imports: [NativeScriptRouterModule.forChild(routes)],
+  exports: [NativeScriptRouterModule],
+})
+export class Items2RoutingModule {}

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

@@ -0,0 +1,12 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+import { ItemsComponent } from './items.component';
+import { Items2RoutingModule } from './item3-routing.module';
+
+@NgModule({
+  imports: [NativeScriptCommonModule, Items2RoutingModule],
+  declarations: [ItemsComponent],
+  exports: [Items2RoutingModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class Item3Module {}