Add possibility to use pathRouting with angular-cli (#288)

* added @angular-builders to support webpack extension in angular-cli. enabled path routing for example app by default
* removed obsolete webpack config and refactored e2e tests to work with path routing
* fix for non-redirect issue for path routing and logo + title click

core/examples/luigi-sample-angular/README.md

@@ -35,16 +35,14 @@ To have this application running, follow these steps:
 
    You can use hash-based routing or path-based routing in your application:
 
-    - To run Luigi with hash-based routing, change the **routing.useHashrouting** configuration to `true` and run the following command:
+    - To run Luigi with hash-based routing, set the **routing.useHashrouting** configuration to `true`.
+    - To run Luigi with path-based routing, set the **routing.useHashrouting** configuration to `false`.
+
+    Run the server with the following command:
         ```bash
         npm run start
         ```
 
-    - To run Luigi with path-based routing, change the **routing.useHashrouting** configuration to `false` and run the following command:
-        ```bash
-        npm run startWebpack
-        ```
-
 5. Go to [http://localhost:4200/](http://localhost:4200/) to start the application.
 
 6. Optional: Reflect the changes introducted to the Luigi Core code in the sample application.
@@ -68,11 +66,6 @@ Run the sample application to perform the tests. When the application is ready:
 <!-- ## Run server
 * Using Angular CLI (standard): `npm run start`
 
-> If you want to enable path routing instead of hash, run the app without Angular CLI.
-
-* Without Angular CLI: `npm run startWebpack`
-
-
 ## Use OpenID Connect
 
 For running OpenID Connect (OIDC) locally, for example with DEX, follow these steps:

core/examples/luigi-sample-angular/angular.json

@@ -9,8 +9,11 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./webpack-extra.config.js"
+            },
             "outputPath": "dist",
             "index": "src/sampleapp.html",
             "main": "src/main.ts",
@@ -73,7 +76,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/dev-server:generic",
           "options": {
             "browserTarget": "luigisample:build"
           },

core/examples/luigi-sample-angular/e2e/support/commands.js

@@ -14,7 +14,7 @@ Cypress.Commands.add('login', (email, password) => {
   cy.get('#login-button').click();
   cy.get('.fd-shellbar').contains('Overview');
   cy.location().should(loc => {
-    expect(loc.hash).to.eq('#/overview');
+    expect(loc.pathname).to.eq('/overview');
   });
 });
 
@@ -23,7 +23,7 @@ Cypress.Commands.add('goToFeaturesPage', iframe => {
     .contains('linkManager()')
     .click();
   cy.location().should(loc => {
-    expect(loc.hash).to.eq('#/projects/pr2');
+    expect(loc.pathname).to.eq('/projects/pr2');
   });
   cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods:');
   cy.wrap(iframe).should('contain', 'LuigiClient linkManager methods:');

core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js

@@ -16,7 +16,7 @@ describe('Context switcher', () => {
       .click();
 
     cy.location().should(loc => {
-      expect(loc.hash).to.eq('#/create-environment');
+      expect(loc.pathname).to.eq('/create-environment');
     });
 
     // default label
@@ -30,7 +30,7 @@ describe('Context switcher', () => {
       .click();
 
     cy.location().should(loc => {
-      expect(loc.hash).to.eq('#/environments/env1');
+      expect(loc.pathname).to.eq('/environments/env1');
     });
 
     // check label

core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js

@@ -17,7 +17,7 @@ describe('Luigi client features', () => {
         .contains('absolute: to overview')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/overview');
+        expect(loc.pathname).to.eq('/overview');
       });
       cy.goToFeaturesPage($iframeBody);
 
@@ -26,7 +26,7 @@ describe('Luigi client features', () => {
         .contains('relative: to stakeholders')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/users/groups/stakeholders');
+        expect(loc.pathname).to.eq('/projects/pr2/users/groups/stakeholders');
       });
       cy.goToOverviewPage();
       cy.goToFeaturesPage($iframeBody);
@@ -36,7 +36,7 @@ describe('Luigi client features', () => {
         .contains('closest parent: to stakeholders')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/users/groups/stakeholders');
+        expect(loc.pathname).to.eq('/projects/pr2/users/groups/stakeholders');
       });
       cy.goToOverviewPage();
       cy.goToFeaturesPage($iframeBody);
@@ -46,14 +46,14 @@ describe('Luigi client features', () => {
         .contains('parent by name: project to settings')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/settings');
+        expect(loc.pathname).to.eq('/projects/pr2/settings');
       });
       cy.wrap($iframeBody).should('contain', 'Settings');
       cy.wrap($iframeBody)
         .contains('Click here')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2');
+        expect(loc.pathname).to.eq('/projects/pr2');
       });
 
       //navigate with params
@@ -63,29 +63,30 @@ describe('Luigi client features', () => {
       cy.wrap($iframeBody).should('contain', 'Called with params:');
       cy.wrap($iframeBody).should('contain', '"foo": "bar"');
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/settings?~foo=bar&');
+        expect(loc.pathname).to.eq('/projects/pr2/settings');
+        expect(loc.search).to.eq('?~foo=bar&');
       });
       cy.wrap($iframeBody)
         .contains('Click here')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2');
+        expect(loc.pathname).to.eq('/projects/pr2');
       });
 
       //don't navigate
       cy.wrap($iframeBody)
         .contains('parent by name: with nonexisting context')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2');
+        expect(loc.pathname).to.eq('/projects/pr2');
       });
 
       //navigate with preserve view functionality
       cy.wrap($iframeBody)
         .contains('with preserved view: project to global settings and back')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/settings');
+        expect(loc.pathname).to.eq('/settings');
       });
 
       //wait for the second iFrame to be loaded
@@ -104,7 +105,7 @@ describe('Luigi client features', () => {
             .find('button')
             .click();
           cy.location().should(loc => {
-            expect(loc.hash).to.eq('#/projects/pr2');
+            expect(loc.pathname).to.eq('/projects/pr2');
           });
         });
 
@@ -153,7 +154,7 @@ describe('Luigi client features', () => {
         .contains('Partly wrong link')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/miscellaneous2');
+        expect(loc.pathname).to.eq('/projects/pr2/miscellaneous2');
       });
       cy.get('.fd-alert').contains(
         'Could not map the exact target node for the requested route projects/pr2/miscellaneous2/maskopatol'
@@ -165,7 +166,7 @@ describe('Luigi client features', () => {
         .contains('Totally wrong link')
         .click();
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/overview');
+        expect(loc.pathname).to.eq('/overview');
       });
       cy.get('.fd-alert').contains(
         'Could not find the requested route maskopatol/has/a/child'

core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js

@@ -19,7 +19,7 @@ describe('Navigation', () => {
 
     //project one page
     cy.location().should(loc => {
-      expect(loc.hash).to.eq('#/projects/pr1');
+      expect(loc.pathname).to.eq('/projects/pr1');
     });
     cy.get('.fd-app__sidebar').should('not.contain', 'Project One');
     cy.get('.fd-app__sidebar').should('contain', 'Miscellaneous2');
@@ -29,7 +29,7 @@ describe('Navigation', () => {
 
     //default child node example
     cy.location().should(loc => {
-      expect(loc.hash).to.eq('#/projects/pr1/dps/dps2');
+      expect(loc.pathname).to.eq('/projects/pr1/dps/dps2');
     });
     cy.get('.fd-app__sidebar').should('contain', 'First Child');
     cy.get('.fd-app__sidebar').should('contain', 'Second Child');
@@ -69,7 +69,7 @@ describe('Navigation', () => {
       });
 
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr1/avengers/thor');
+        expect(loc.pathname).to.eq('/projects/pr1/avengers/thor');
       });
 
       cy.get('.fd-app__sidebar').should('contain', 'Keep Selected Example');
@@ -104,7 +104,7 @@ describe('Navigation', () => {
         .click();
 
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/settings');
+        expect(loc.pathname).to.eq('/settings');
       });
 
       //go to relative path from the parent node
@@ -114,7 +114,7 @@ describe('Navigation', () => {
         .click();
 
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/dps/dps1');
+        expect(loc.pathname).to.eq('/projects/pr2/dps/dps1');
       });
 
       //go to relative path from node that is a sibiling
@@ -124,19 +124,20 @@ describe('Navigation', () => {
         .click();
 
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/avengers');
+        expect(loc.pathname).to.eq('/projects/pr2/avengers');
       });
 
       cy.get('.fd-app__sidebar .fd-side-nav__item')
         .contains('Go to relative path')
         .click();
 
       cy.location().should(loc => {
-        expect(loc.hash).to.eq('#/projects/pr2/dps/dps1');
+        expect(loc.pathname).to.eq('/projects/pr2/dps/dps1');
       });
     });
-    it('should hide left Nav', () => {
-      cy.visit('/#/projects/pr1/hideSideNav');
+
+    it('Left navigation hidden', () => {
+      cy.visit('http://localhost:4200/projects/pr1/hideSideNav');
       cy.get('.no-side-nav').should('exist');
       cy.get('.fd-app__sidebar').should('not.be.visible');
     });