feat: add redirectToRoute empty route

examples/app1/src/app/app.routing.ts

@@ -2,19 +2,15 @@ import { InitializedDataResolver } from './services/initialized-data.resolver';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { Route } from '@angular/router';
 import { AppActualRootComponent } from './root/root.component';
-import { EmptyComponent } from 'ngx-planet';
+import { EmptyComponent, redirectToRoute } from 'ngx-planet';
 import { ProjectsComponent } from './projects/projects.component';
 
 export const routers: Route[] = [
     {
         path: 'app1',
         component: AppActualRootComponent,
         children: [
-            // {
-            //     path: '',
-            //     redirectTo: 'dashboard',
-            //     pathMatch: 'full'
-            // },
+            redirectToRoute('dashboard'),
             {
                 path: 'dashboard',
                 component: DashboardComponent

examples/app1/src/app/root/root.component.ts

@@ -11,8 +11,6 @@ import { UserDetailComponent } from '../user/detail/user-detail.component';
 export class AppActualRootComponent {
     @HostBinding(`class.thy-layout`) isLayout = true;
 
-    redirect = routeRedirect('dashboard');
-
     constructor() {}
 }
 

examples/app2/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ProjectDetailComponent } from './projects/detail/detail.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { EmptyComponent, NgxPlanetModule } from 'ngx-planet';
+import { EmptyComponent, NgxPlanetModule, redirectToRoute } from 'ngx-planet';
 import { DemoCommonModule, OVERLAY_PROVIDER } from '@demo/common';
 import { ProjectResolver } from './projects/project.resolver';
 import { TasksComponent } from './projects/tasks/tasks.component';
@@ -23,18 +23,17 @@ const routers: Route[] = [
         path: 'app2',
         component: AppActualRootComponent,
         children: [
-            // {
-            //     path: '',
-            //     redirectTo: 'dashboard',
-            //     pathMatch: 'full'
-            // },
+            redirectToRoute('dashboard'),
             {
                 path: 'users',
                 loadChildren: () => import('./user/user.module').then(mod => mod.UserModule)
             },
             {
                 path: 'projects',
                 component: ProjectListComponent
+                // children: [
+                //     redirectToRoute('./1'),
+                // ]
             },
             {
                 path: 'projects/:id',

examples/app2/src/app/projects/project-list.component.html

@@ -27,3 +27,5 @@
     </thy-table-column>
   </thy-table>
 </thy-content>
+
+<router-outlet></router-outlet>

examples/app2/src/app/projects/project-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, DoCheck, ApplicationRef, HostBinding } from '@angular/core';
-import { GlobalEventDispatcher } from 'ngx-planet';
+import { GlobalEventDispatcher, routeRedirect } from 'ngx-planet';
 import { ProjectService } from './projects.service';
 import { ThyDialog } from 'ngx-tethys/dialog';
 import { ProjectDetailComponent } from './detail/detail.component';

examples/app2/src/app/root/root.component.ts

@@ -11,8 +11,6 @@ export class AppActualRootComponent {
     @HostBinding(`class.thy-layout`) isThyLayout = true;
     @HostBinding(`class.thy-layout--has-sidebar`) isThyHasSidebarLayout = true;
 
-    routeRedirect = routeRedirect('dashboard');
-
     constructor() {}
 }
 

packages/planet/src/module.ts

@@ -3,10 +3,11 @@ import { PlanetApplication, PLANET_APPLICATIONS } from './planet.class';
 import { HttpClientModule } from '@angular/common/http';
 import { EmptyComponent } from './empty/empty.component';
 import { PlanetComponentOutlet } from './component/planet-component-outlet';
+import { RedirectToRouteComponent } from './router/route-redirect';
 
 @NgModule({
     declarations: [],
-    imports: [HttpClientModule, PlanetComponentOutlet, EmptyComponent],
+    imports: [HttpClientModule, PlanetComponentOutlet, EmptyComponent, RedirectToRouteComponent],
     providers: [],
     exports: [HttpClientModule, EmptyComponent, PlanetComponentOutlet]
 })

packages/planet/src/router/route-redirect.spec.ts

@@ -1,13 +1,36 @@
-import { Component, inject } from '@angular/core';
-import { Location } from '@angular/common';
+import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { ActivatedRoute, Router, provideRouter } from '@angular/router';
+import { RouterOutlet, provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
-import { routeRedirect } from './route-redirect';
-import { BehaviorSubject } from 'rxjs';
+import { routeRedirect, redirectToRoute } from './route-redirect';
 
 describe('route-redirect', () => {
-    it('should redirect to success', async () => {
+    it('should redirect to success use redirectToRoute', async () => {
+        @Component({ standalone: true, template: '<router-outlet></router-outlet>', imports: [RouterOutlet] })
+        class TestComponent {}
+
+        @Component({ standalone: true, template: 'hello world' })
+        class HelloComponent {}
+
+        TestBed.configureTestingModule({
+            providers: [
+                provideRouter([
+                    {
+                        path: 'app1',
+                        component: TestComponent,
+                        children: [redirectToRoute('hello'), { path: 'hello', component: HelloComponent }]
+                    }
+                ])
+            ]
+        });
+
+        const harness = await RouterTestingHarness.create();
+        const activatedComponent = await harness.navigateByUrl('/app1');
+        expect(activatedComponent).toBeInstanceOf(TestComponent);
+        expect(harness.routeNativeElement?.innerHTML).toContain('hello world');
+    });
+
+    it('should redirect to success use routeRedirect', async () => {
         @Component({ standalone: true, template: '' })
         class TestComponent {
             routeRedirect = routeRedirect('hello');
@@ -26,7 +49,6 @@ describe('route-redirect', () => {
         });
 
         const harness = await RouterTestingHarness.create();
-        const router = TestBed.inject(Router);
         const activatedComponent = await harness.navigateByUrl('/');
         expect(activatedComponent).toBeInstanceOf(HelloComponent);
         expect(harness.routeNativeElement?.innerHTML).toContain('hello world');

packages/planet/src/router/route-redirect.ts

@@ -1,5 +1,5 @@
-import { inject } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Route, Router, UrlTree } from '@angular/router';
 
 class RouteRedirect {
     activatedRoute = inject(ActivatedRoute);
@@ -8,20 +8,56 @@ class RouteRedirect {
     constructor(redirectTo: string) {
         const finalRedirectTo = redirectTo || this.activatedRoute.snapshot.data.redirectTo;
         if (finalRedirectTo) {
-            this.router.navigate(
-                [`${finalRedirectTo}`],
-                // By replacing the current URL in the history, we keep the Browser's Back
-                // Button behavior in tact. This will allow the user to easily navigate back
-                // to the previous URL without getting caught in a redirect.
-                {
-                    replaceUrl: true,
-                    relativeTo: this.activatedRoute
-                }
-            );
+            const activatedRouteUrl = this.activatedRoute.pathFromRoot
+                .filter(route => {
+                    return route.snapshot.url?.length > 0;
+                })
+                .map(route => {
+                    return route.snapshot.url.join('/');
+                })
+                .join('/');
+            if (
+                this.router.isActive(activatedRouteUrl, {
+                    matrixParams: 'exact',
+                    paths: 'exact',
+                    queryParams: 'exact',
+                    fragment: 'exact'
+                })
+            ) {
+                this.router.navigate(
+                    [`${finalRedirectTo}`],
+                    // By replacing the current URL in the history, we keep the Browser's Back
+                    // Button behavior in tact. This will allow the user to easily navigate back
+                    // to the previous URL without getting caught in a redirect.
+                    {
+                        replaceUrl: true,
+                        relativeTo: this.activatedRoute
+                    }
+                );
+            }
         }
     }
 }
 
 export function routeRedirect(redirectTo?: string) {
     return new RouteRedirect(redirectTo);
 }
+
+@Component({
+    selector: 'planet-redirect-to-route',
+    template: '',
+    standalone: true
+})
+export class RedirectToRouteComponent {
+    routeRedirect = routeRedirect();
+}
+
+export function redirectToRoute(redirectTo: string): Route {
+    return {
+        path: '',
+        component: RedirectToRouteComponent,
+        data: {
+            redirectTo: redirectTo
+        }
+    };
+}