Integrate my changes to a possible solution (#1714)

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/component/luigi.preload.component.html

@@ -0,0 +1,24 @@
+<p>NG Luigi Library Demo Component</p>
+
+<p>
+  This is a demo component; in Luigi it is a
+  <a
+    href="https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=virtualtree"
+    >virtual tree</a
+  >.
+  <br />
+  If you want to configure an Angular Component to be called in virtual tree,
+  you must use this route configuration:
+  <br />
+  <br />
+  <code>{{ routeExampleVirtual }}</code>
+</p>
+<br />
+
+<p>
+  If you want to configure an Angular Component to be just created once (like a
+  singleton( you can use this configuration:
+  <br />
+  <br />
+  <code>{{ routeExampleReuse }}</code>
+</p>

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/preload.component.spec.ts → client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/component/luigi.preload.component.spec.ts

@@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PreloadComponent } from './preload.component';
+import { LuigiPreloadComponent } from './luigi.preload.component';
 
 describe('ClientSupportAngularComponent', () => {
-  let component: PreloadComponent;
-  let fixture: ComponentFixture<PreloadComponent>;
+  let component: LuigiPreloadComponent;
+  let fixture: ComponentFixture<LuigiPreloadComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PreloadComponent ]
-    })
-    .compileComponents();
+      declarations: [LuigiPreloadComponent]
+    }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PreloadComponent);
+    fixture = TestBed.createComponent(LuigiPreloadComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/component/luigi.preload.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-client-support-angular',
+  templateUrl: './luigi.preload.component.html',
+  styles: []
+})
+export class LuigiPreloadComponent implements OnInit {
+  constructor() {}
+  routeExampleVirtual: string =
+    "  {path: 'ng-luigi-demo', component: NgLuigiDemoComponent, data: {fromVirtualTreeRoot: true}}";
+  routeExampleReuse: string =
+    "  {path: 'ng-luigi-demo', component: NgLuigiDemoComponent, data: {reuse: true}}";
+  ngOnInit(): void {}
+}

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/luigi.angular.support.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
+import { LuigiReuseStrategy } from './route/luigiReuseStrategy';
+import { LuigiPreloadComponent } from './component/luigi.preload.component';
+import { LuigiContextService } from './service/luigi-context-service';
+import { LuigiContextServiceImpl } from './service/luigi-context.service.impl';
+import { LuigiAutoRoutingService } from './service/luigi-auto-routing.service';
+
+export const staticRoutes: Routes = [
+  /** here an example if you want to specify that this component is a virtualThree element in Luigi Core navigation*/
+  {
+    path: 'luigi-client-support-preload',
+    component: LuigiPreloadComponent,
+    data: { fromVirtualTreeRoot: true }
+  },
+  /** here an example if you want to specify that this component it is a luigi component and u want to change the navigation in Luigi core*/
+  {
+    path: 'luigi-client-support-preload',
+    component: LuigiPreloadComponent,
+    data: { luigiRoute: '/home/reload' }
+  },
+  /** here an example if you want to reuse the component and not recreating every time you navigate to it (a singleton Component) */
+  {
+    path: 'luigi-client-support-preload=component',
+    component: LuigiPreloadComponent,
+    data: { reuse: true }
+  }
+];
+
+@NgModule({
+  declarations: [LuigiPreloadComponent],
+  imports: [RouterModule.forChild(staticRoutes)],
+  providers: [
+    {
+      provide: LuigiContextService,
+      useClass: LuigiContextServiceImpl
+    },
+    {
+      provide: RouteReuseStrategy,
+      useClass: LuigiReuseStrategy
+    }
+  ],
+  exports: [LuigiPreloadComponent]
+})
+export class LuigiAngularSupportModule {
+  constructor(
+    navigation: LuigiAutoRoutingService,
+    context: LuigiContextService
+  ) {}
+}

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/route/luigi-activated-route-snapshot-helper.spec.ts

@@ -0,0 +1,7 @@
+import { LuigiActivatedRouteSnapshotHelper } from './luigi-activated-route-snapshot-helper';
+
+describe('NgLuigiActivatedRouteSnapshotService', () => {
+  it('should create an instance', () => {
+    expect(new LuigiActivatedRouteSnapshotHelper()).toBeTruthy();
+  });
+});

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/route/luigi-activated-route-snapshot-helper.ts

@@ -0,0 +1,13 @@
+import { ActivatedRouteSnapshot } from '@angular/router';
+
+export class LuigiActivatedRouteSnapshotHelper {
+  private static _current: ActivatedRouteSnapshot;
+
+  static getCurrent(): ActivatedRouteSnapshot {
+    return this._current;
+  }
+
+  static setCurrent(current: ActivatedRouteSnapshot) {
+    this._current = current;
+  }
+}

client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/route/luigiReuseStrategy.ts

@@ -0,0 +1,69 @@
+import {
+  RouteReuseStrategy,
+  ActivatedRouteSnapshot,
+  DetachedRouteHandle
+} from '@angular/router';
+import { LuigiActivatedRouteSnapshotHelper } from './luigi-activated-route-snapshot-helper';
+
+export class LuigiReuseStrategy implements RouteReuseStrategy {
+  private handlers: { [key: string]: DetachedRouteHandle } = {};
+
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    if (!route.routeConfig || route.routeConfig.loadChildren) {
+      return false;
+    }
+    let shouldReuse = false;
+    console.debug('checking if this route should be re used or not', route);
+    if (route.routeConfig.data) {
+      route.routeConfig.data.reuse
+        ? (shouldReuse = true)
+        : (shouldReuse = false);
+    }
+
+    return shouldReuse;
+  }
+
+  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
+    console.debug('storing handler');
+    if (handler) {
+      this.handlers[this.getUrl(route)] = handler;
+    }
+  }
+
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    console.debug('checking if it should be re attached');
+    return !!this.handlers[this.getUrl(route)];
+  }
+
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    LuigiActivatedRouteSnapshotHelper.setCurrent(route);
+    if (!route.routeConfig || route.routeConfig.loadChildren) {
+      return null;
+    }
+
+    return this.handlers[this.getUrl(route)];
+  }
+
+  shouldReuseRoute(
+    future: ActivatedRouteSnapshot,
+    current: ActivatedRouteSnapshot
+  ): boolean {
+    let reUseUrl = false;
+    if (future.routeConfig) {
+      if (future.routeConfig.data) {
+        reUseUrl = future.routeConfig.data.reuse;
+      }
+    }
+    const defaultReuse = future.routeConfig === current.routeConfig;
+    //return reUseUrl || defaultReuse;
+    return defaultReuse;
+  }
+
+  getUrl(route: ActivatedRouteSnapshot): string {
+    if (route.routeConfig) {
+      const url = route.routeConfig.path;
+      console.debug('returning url', url);
+      return url;
+    }
+  }
+}