Feature angular supporting library: Refactor + First Doc (#1724)

* Removing default reuse option Creating a new Standard LuigiRoute and refactor the Reuse (that it will not be used) * Adding documentation * Adding more doc * complete docuumetation for client-support-angular * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/route/luigi-route-strategy.ts Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Adding fix for release build * Adding changes for regular/nightly release * cleanin some code * Fix for travis: linking client to node_modules * change for travis... * Adding config for npmPublish.sh * Update scripts/tools/publish-nightly.js Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * changing version to 1.6.0 * adding -p option when creating directory * trying to fix travis.... * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com> * fixing documenttion * more fix in documentation * more fix in documentation * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * adding @luigi-project/client dipendency * Update test/e2e-test-application/src/luigi-config/extended/globalSearch.js Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/README.md Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> * Update client-frameworks-support/client-support-angular/projects/client-support-angular/src/lib/luigi.angular.support.module.ts Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> Co-authored-by: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com> Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com>
SAP · Dec 3, 2020 · 82d8e93 · 82d8e93
1 parent e64a53b
commit 82d8e93
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 41 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -15,6 +15,7 @@ cache:
     - $TRAVIS_BUILD_DIR/test/e2e-test-application/externalMf
     - $TRAVIS_BUILD_DIR/website/fiddle/public
     - $TRAVIS_BUILD_DIR/cypress-binary-cache
+    - $TRAVIS_BUILD_DIR/client-frameworks-support/client-support-angular
     - $HOME/.cache/Cypress
 notifications:
   slack:
@@ -70,6 +71,9 @@ jobs:
         - rm -rf $TRAVIS_BUILD_DIR/test/e2e-test-application/node_modules/@luigi-project/*
         - ln -s $TRAVIS_BUILD_DIR/core/public $TRAVIS_BUILD_DIR/test/e2e-test-application/node_modules/@luigi-project/core
         - ln -s $TRAVIS_BUILD_DIR/client/public $TRAVIS_BUILD_DIR/test/e2e-test-application/node_modules/@luigi-project/client
+        - mkdir -p $TRAVIS_BUILD_DIR/client-frameworks-support/client-support-angular/node_modules/@luigi-project/
+        - rm -rf $TRAVIS_BUILD_DIR/client-frameworks-support/client-support-angular/node_modules/@luigi-project/*
+        - ln -s $TRAVIS_BUILD_DIR/client/public $TRAVIS_BUILD_DIR/client-frameworks-support/client-support-angular/node_modules/@luigi-project/client
         - ln -s $TRAVIS_BUILD_DIR/plugins/auth/public/auth-oauth2 $TRAVIS_BUILD_DIR/test/e2e-test-application/node_modules/@luigi-project/plugin-auth-oauth2
         - ln -s $TRAVIS_BUILD_DIR/plugins/auth/public/auth-oidc $TRAVIS_BUILD_DIR/test/e2e-test-application/node_modules/@luigi-project/plugin-auth-oidc
         # Link fiddle manually:

diff --git a/client-frameworks-support/client-support-angular/angular.json b/client-frameworks-support/client-support-angular/angular.json
@@ -36,13 +36,14 @@
               "projects/client-support-angular/tsconfig.lib.json",
               "projects/client-support-angular/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
     }
   },
-  "defaultProject": "client-support-angular"
+  "defaultProject": "client-support-angular",
+  "cli": {
+    "analytics": false
+  }
 }
diff --git a/client-frameworks-support/client-support-angular/package-lock.json b/client-frameworks-support/client-support-angular/package-lock.json
diff --git a/client-frameworks-support/client-support-angular/package.json b/client-frameworks-support/client-support-angular/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "client-support-angular",
+  "name": "@luigi-project/client-support-angular",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -8,7 +8,8 @@
     "test": "ng test",
     "lint": "ng lint",
     "build:lib": "ng build client-support-angular --prod",
-    "release": "npm run build:lib && cd dist/client-support-angular/ && npm publish"
+    "bundle": "ng build client-support-angular --prod",
+    "bundle-develop": "ng build client-support-angular --watch"
   },
   "private": true,
   "dependencies": {
@@ -20,6 +21,7 @@
     "@angular/platform-browser": "~11.0.0",
     "@angular/platform-browser-dynamic": "~11.0.0",
     "@angular/router": "~11.0.0",
+    "@luigi-project/client": "1.6.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

diff --git a/...eworks-support/client-support-angular/projects/client-support-angular/README.md b/...eworks-support/client-support-angular/projects/client-support-angular/README.md
@@ -1,24 +1,115 @@
 # ClientSupportAngular
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.0.
+This library provides several features to run your Angular application inside the Luigi micro frontend framework.  
+If you want to know more about Luigi, please have a look at the [Luigi homepage](https://luigi-project.io/).
 
-## Code scaffolding
+## How to use the library
+1. Import the library in the `package.json`:
+```javascript
+npm install @luigi-project/client-support-angular -s
+```
 
-Run `ng generate component component-name --project client-support-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project client-support-angular`.
-> Note: Don't forget to add `--project client-support-angular` or else it will be added to the default project in your `angular.json` file. 
+2. Once the library is imported and saved in your Angular project, you need to import the module `LuigiAngularSupportModule`:
 
-## Build
+```javascript
+imports: [
+  ........
+  ,LuigiAngularSupportModule
+],
+```
 
-Run `ng build client-support-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Features
+These are the main features provided by the library:
+* [LuigiContextService](#LuigiContextService)
+* [LuigiAutoRoutingService](#LuigiAutoRoutingService) 
 
-## Publishing
+### LuigiContextService
+You can inject this service inside your Angular items in order to:
+* Get the current (latest) Context that we received from Luigi Core
+* Provide an Observable<Context> where through subscribing, you can get any Context change     
+
+**LuigiContextService** is an abstract class. Its implementation is in the **LuigiContextServiceImpl** class.  
+If you need to change or extend the implementation, you can easily create a new class extending **LuigiContextServiceImpl**:
 
-After building your library with `ng build client-support-angular`, go to the dist folder `cd dist/client-support-angular` and run `npm publish`.
+In this class, we added the possibility to "reuse" a component and not initialize it every time you load it (it could be useful to keep component state.)  
 
-## Running unit tests
+```javascript
+export class YourContextService extends  LuigiContextServiceImpl {
+    ....    
+}
 
-Run `ng test client-support-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+Inside your module, redefine the provider:
+ ```javascript
+providers: [
+    {
+        provide: LuigiContextService,
+        useClass: YourContextService
+    }
+]
+ ```
+
+### LuigiAutoRoutingService
+This service cannot be used directly, but it will provide useful features on how to synchronize your angular application with Luigi navigation.  
+It can happen that in your microfrontend, user can navigate through different components/pages.  
+With this feature we provide an easy way of synchronizing angular route with Luigi navigation; in angular route configuration, you can now add in data these attributes:
 
-## Further help
+ ```javascript
+{path: 'luigi-client-support-preload',component: Sample1Component,data: { fromVirtualTreeRoot: true }}
+{path: 'luigi-client-support-preload',component: Sample2Component,data: { luigiRoute: '/home/sample2' }}
+ ```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+with `data: { fromVirtualTreeRoot: true }`, once we load Sample1Component, we will call Luigi Client:
+ ```javascript
+  luigiClient.linkManager().fromVirtualTreeRoot().withoutSync().navigate({route url});
+ ```
+with `data: { luigiRoute: '/home/sample2' }`, uses luigiClient API in this way:
+ ```javascript
+  luigiClient.linkManager().withoutSync().navigate(data.luigiRoute);
+ ```
+More information about linkManager can be found [here](https://docs.luigi-project.io/docs/luigi-client-api/?section=linkmanager).
+
+
+## LuigiRouteStrategy
+To use **LuigiAutoRoutingService**, this library defines a new **RouteReuseStrategy** named **LuigiRouteStrategy**.  
+If you need to define your own **RouteReuseStrategy**, you can extend **LuigiRouteStrategy** by overriding it in this way:
+
+ ```javascript
+export class YourRouteStrategy extends LuigiRouteStrategy {
+
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        super.retrieve(route);
+        // Your code
+    }
+
+}
+ ```
+and define the provider:
+ ```javascript
+ {
+      provide: RouteReuseStrategy,
+      useClass: YourRouteStrategy
+ }
+ ```
+
+We also provide an example of how to extend **LuigiRouteStrategy** in class **LuigiReuseRouteStrategy**.  
+In this class, we added the possibility to "reuse" a component and not initialize it every time you load it (it could be useful to keep component state.)  
+
+**LuigiReuseRouteStrategy** can be configured in the following way:
+ ```javascript
+{path: 'luigi-client-support-preload',component: Sample1Component,data: { reuse: true }}
+ ```
+
+If you want to use **LuigiReuseRouteStrategy** (it is not enabled by default), you need to configure in your application:
+ ```javascript
+ {
+      provide: RouteReuseStrategy,
+      useClass: LuigiReuseRouteStrategy
+ }
+ ```
+
+
+
+
+
+
diff --git a/...t-support-angular/projects/client-support-angular/src/lib/luigi.angular.support.module.ts b/...t-support-angular/projects/client-support-angular/src/lib/luigi.angular.support.module.ts
@@ -1,13 +1,14 @@
 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';
+import {LuigiReuseRouteStrategy} from "./route/luigi-reuse-route-strategy.ts";
+import {LuigiRouteStrategy} from "./route/luigi-route-strategy";
 
 export const staticRoutes: Routes = [
-  /** here an example if you want to specify that this component is a virtualThree element in Luigi Core navigation*/
+  /** here an example if you want to specify that this component is a virtualTree element in Luigi Core navigation*/
   {
     path: 'luigi-client-support-preload',
     component: LuigiPreloadComponent,
@@ -19,7 +20,7 @@ export const staticRoutes: Routes = [
     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) */
+  /** here an example if you want to reuse the component and not recreating every time you navigate to it (a singleton Component) It requires in your module to redefine  */
   {
     path: 'luigi-client-support-preload=component',
     component: LuigiPreloadComponent,
@@ -37,7 +38,7 @@ export const staticRoutes: Routes = [
     },
     {
       provide: RouteReuseStrategy,
-      useClass: LuigiReuseStrategy
+      useClass: LuigiRouteStrategy
     }
   ],
   exports: [LuigiPreloadComponent]

diff --git a/...gular/src/lib/route/luigiReuseStrategy.ts → ...ib/route/luigi-reuse-route-strategy.ts.ts b/...gular/src/lib/route/luigiReuseStrategy.ts → ...ib/route/luigi-reuse-route-strategy.ts.ts
@@ -1,11 +1,10 @@
 import {
-  RouteReuseStrategy,
   ActivatedRouteSnapshot,
   DetachedRouteHandle
 } from '@angular/router';
-import { LuigiActivatedRouteSnapshotHelper } from './luigi-activated-route-snapshot-helper';
+import {LuigiRouteStrategy} from "./luigi-route-strategy";
 
-export class LuigiReuseStrategy implements RouteReuseStrategy {
+export class LuigiReuseRouteStrategy extends LuigiRouteStrategy {
   private handlers: { [key: string]: DetachedRouteHandle } = {};
 
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
@@ -36,7 +35,7 @@ export class LuigiReuseStrategy implements RouteReuseStrategy {
   }
 
   retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-    LuigiActivatedRouteSnapshotHelper.setCurrent(route);
+    super.retrieve(route);
     if (!route.routeConfig || route.routeConfig.loadChildren) {
       return (null as unknown) as DetachedRouteHandle;
     }
@@ -48,14 +47,7 @@ export class LuigiReuseStrategy implements RouteReuseStrategy {
     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;
   }
 

diff --git a/...ent-support-angular/projects/client-support-angular/src/lib/route/luigi-route-strategy.ts b/...ent-support-angular/projects/client-support-angular/src/lib/route/luigi-route-strategy.ts
@@ -0,0 +1,25 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router";
+import { LuigiActivatedRouteSnapshotHelper } from "./luigi-activated-route-snapshot-helper";
+
+export class LuigiRouteStrategy implements RouteReuseStrategy {
+
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+      return false;
+  }
+
+  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {}
+
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    LuigiActivatedRouteSnapshotHelper.setCurrent(route);
+    return (null as unknown) as DetachedRouteHandle;
+  }
+
+  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
+    return future.routeConfig === current.routeConfig;
+  }
+
+}
diff --git a/...ngular/projects/client-support-angular/src/lib/service/luigi-context.service.impl.spec.ts b/...ngular/projects/client-support-angular/src/lib/service/luigi-context.service.impl.spec.ts
@@ -4,6 +4,7 @@ import { LuigiContextServiceImpl } from './luigi-context.service.impl';
 describe('LuigiContextService', () => {
   let service: LuigiContextServiceImpl;
 
+  // @ts-ignore
   beforeEach(() => {
     TestBed.configureTestingModule({});
     service = TestBed.inject(LuigiContextServiceImpl);

diff --git a/...meworks-support/client-support-angular/projects/client-support-angular/tsconfig.spec.json b/...meworks-support/client-support-angular/projects/client-support-angular/tsconfig.spec.json
@@ -8,7 +8,8 @@
     ]
   },
   "files": [
-    "src/test.ts"
+    "src/test.ts",
+    "../../node_modules/@types/jest/index.d.ts"
   ],
   "include": [
     "**/*.spec.ts",