refactor(docs): changed to non hashbased routing and ssr (#6711)

* refactor(docs): changed to non hashbased routing and ssr

* refactor(docs): updated package-lock.json

* fix(e2e): updated e2e

* feat(docs): updated ci

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

* feat(ssr-docs); merged development

Author: lexasq

.github/workflows/on-push-or-pull.yml

@@ -66,7 +66,7 @@ jobs:
 #          npx nx build --runner=cloud --configuration=production
       - run: |
           npx nx build ngx-bootstrap --configuration=production
-          npx nx build --configuration=production
+          npx nx prerender --configuration=production
 
 
   # run unit tests
@@ -151,7 +151,7 @@ jobs:
 
       - name: smoke e2e on firebase
         if: ${{ needs.firebase_preview.outputs.output_url }}
-        run:  PLAYWRIGHT_TEST_BASE_URL="${{ needs.firebase_preview.outputs.output_url }}/ngx-bootstrap/" npx nx run ngx-bootstrap-docs-e2e:e2e --pwProject=chromium-integration --skipServe --shard=${{ matrix.shard }}/${{ strategy.job-total }}
+        run: PLAYWRIGHT_TEST_BASE_URL="${{ needs.firebase_preview.outputs.output_url }}/ngx-bootstrap/" npx nx run ngx-bootstrap-docs-e2e:e2e --pwProject=chromium-integration --skipServe --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
       - name: smoke e2e local
         if: ${{ !needs.firebase_preview.outputs.output_url }}

.github/workflows/on-release.yml

@@ -52,7 +52,7 @@ jobs:
           key: dist-${{ github.run_id }}
       - run: |
           npx nx build ngx-bootstrap --runner=cloud --configuration=production
-          npx ng build --runner=cloud --configuration=production
+          npx nx prerender --runner=cloud --configuration=production
 
   # update release notes in github
 #  update_release_draft:

apps/ngx-bootstrap-docs-e2e/playwright.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   testMatch: '**/*.spec.ts',
   fullyParallel: true,
   workers: 3,
+
   reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]],
   use: {
     baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] || 'http://localhost:4200/ngx-bootstrap/',

apps/ngx-bootstrap-docs-e2e/project.json

@@ -4,11 +4,15 @@
   "sourceRoot": "apps/ngx-bootstrap-docs-e2e/src",
   "projectType": "application",
   "tags": [],
-  "implicitDependencies": ["ngx-bootstrap-docs"],
+  "implicitDependencies": [
+    "ngx-bootstrap-docs"
+  ],
   "targets": {
     "e2e": {
       "executor": "@nxkit/playwright:test",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "options": {
         "outputPath": "dist/apps/ngx-bootstrap-docs-e2e/test-results",
         "playwrightConfig": "apps/ngx-bootstrap-docs-e2e/playwright.config.ts",
@@ -24,8 +28,10 @@
       }
     },
     "debug": {
-      "builder": "@nxkit/playwright:test",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nxkit/playwright:test",
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "options": {
         "outputPath": "dist/apps/ngx-bootstrap-docs-e2e/test-results",
         "playwrightConfig": "apps/ngx-bootstrap-docs-e2e/playwright.config.ts",
@@ -39,14 +45,16 @@
       }
     },
     "show-report": {
-      "builder": "@nxkit/playwright:show-report",
+      "executor": "@nxkit/playwright:show-report",
       "options": {
         "reportPath": "dist/apps/ngx-bootstrap-docs-e2e/playwright-report"
       }
     },
     "lint": {
       "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputPath}"]
+      "outputs": [
+        "{options.outputPath}"
+      ]
     }
   }
-}
+}

apps/ngx-bootstrap-docs-e2e/src/support/accordion.po.ts

@@ -2,7 +2,7 @@ import { expect, ConsoleMessage } from '@playwright/test';
 import { BasePo } from './base.po';
 
 export class AccordionPo extends BasePo {
-  override pageUrl = '#/components/accordion';
+  override pageUrl = '/ngx-bootstrap/components/accordion';
   pageTitle = 'Accordion';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/accordion';
   additionalHtml = '.badge';

apps/ngx-bootstrap-docs-e2e/src/support/alerts.po.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import { BasePo } from './base.po';
 
 export class AlertsPo extends BasePo {
-  override pageUrl = '#/components/alerts';
+  override pageUrl = '/ngx-bootstrap/components/alerts';
   pageTitle = 'Alerts';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/alert';
 

apps/ngx-bootstrap-docs-e2e/src/support/buttons.po.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import { BasePo } from './base.po';
 
 export class ButtonsPo extends BasePo {
-  override pageUrl = '#/components/buttons';
+  override pageUrl = '/ngx-bootstrap/components/buttons';
   pageTitle = 'Buttons';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/buttons';
 

apps/ngx-bootstrap-docs-e2e/src/support/carousel.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class CarouselPo extends BaseComponent {
-  pageUrl = '#/components/carousel';
+  pageUrl = '/ngx-bootstrap/components/carousel';
   pageTitle = 'Carousel';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/carousel';
 

apps/ngx-bootstrap-docs-e2e/src/support/collapse.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class CollapsePo extends BaseComponent {
-  pageUrl = '#/components/collapse';
+  pageUrl = '/ngx-bootstrap/components/collapse';
   pageTitle = 'Collapse';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/collapse';
 

apps/ngx-bootstrap-docs-e2e/src/support/datepicker.po.ts

@@ -5,7 +5,7 @@ import * as globalLocales from 'ngx-bootstrap/locale';
 import * as moment from 'moment';
 
 export class DatepickerPo extends BaseComponent {
-  pageUrl = '#/components/datepicker';
+  pageUrl = '/ngx-bootstrap/components/datepicker';
   pageTitle = 'Datepicker';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker';
 

apps/ngx-bootstrap-docs-e2e/src/support/dropdowns.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class DropdownsPo extends BaseComponent {
-  pageUrl = '#/components/dropdowns';
+  pageUrl = '/ngx-bootstrap/components/dropdowns';
   pageTitle = 'Dropdowns';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/dropdown';
 

apps/ngx-bootstrap-docs-e2e/src/support/landing.po.ts

@@ -1,8 +1,8 @@
 import { BaseComponent } from './base.component';
 
 export class LandingPo extends BaseComponent {
-  pageUrl = '#/';
-  documentationUrl = '#/documentation/';
+  pageUrl = '/ngx-bootstrap/';
+  documentationUrl = '/ngx-bootstrap/documentation/';
 
   mainClass = '.main';
   logoAtHeader = '[data-cypress="logoAtHeader"]';

apps/ngx-bootstrap-docs-e2e/src/support/modals.po.ts

@@ -2,7 +2,7 @@ import { BaseComponent } from './base.component';
 import PositionType = Cypress.PositionType;
 
 export class ModalsPo extends BaseComponent {
-  pageUrl = '#/components/modals';
+  pageUrl = '/ngx-bootstrap/components/modals';
   pageTitle = 'Modals';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/modal';
 

apps/ngx-bootstrap-docs-e2e/src/support/pagination.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class PaginationPo extends BaseComponent {
-  pageUrl = '#/components/pagination';
+  pageUrl = '/ngx-bootstrap/components/pagination';
   pageTitle = 'Pagination';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/pagination';
 

apps/ngx-bootstrap-docs-e2e/src/support/popover.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class PopoverPo extends BaseComponent {
-  pageUrl = '#/components/popover';
+  pageUrl = '/ngx-bootstrap/components/popover';
   pageTitle = 'Popover';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/popover';
 

apps/ngx-bootstrap-docs-e2e/src/support/progressbar.po.ts

@@ -2,7 +2,7 @@ import { BaseComponent } from './base.component';
 import { AttrObj } from './interfaces';
 
 export class ProgressbarPo extends BaseComponent {
-  pageUrl = '#/components/progressbar';
+  pageUrl = '/ngx-bootstrap/components/progressbar';
   pageTitle = 'Progressbar';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/progressbar';
 

apps/ngx-bootstrap-docs-e2e/src/support/rating.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class RatingPo extends BaseComponent {
-  pageUrl = '#/components/rating';
+  pageUrl = '/ngx-bootstrap/components/rating';
   pageTitle = 'Rating';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/rating';
   tagRating = 'rating';

apps/ngx-bootstrap-docs-e2e/src/support/sortable.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class SortablePo extends BaseComponent {
-  pageUrl = '#/components/sortable';
+  pageUrl = '/ngx-bootstrap/components/sortable';
   pageTitle = 'Sortable';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/blob/development/src/sortable';
 

apps/ngx-bootstrap-docs-e2e/src/support/tabs.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class TabsPo extends BaseComponent {
-  pageUrl = '#/components/tabs';
+  pageUrl = '/ngx-bootstrap/components/tabs';
   pageTitle = 'Tabs';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/tabs';
 

apps/ngx-bootstrap-docs-e2e/src/support/timepicker.po.ts

@@ -3,7 +3,7 @@ import ObjectLike = Cypress.ObjectLike;
 import TriggerOptions = Cypress.TriggerOptions;
 
 export class TimepickerPo extends BaseComponent {
-  pageUrl = '#/components/timepicker';
+  pageUrl = '/ngx-bootstrap/components/timepicker';
   pageTitle = 'Timepicker';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/timepicker';
 

apps/ngx-bootstrap-docs-e2e/src/support/tooltip.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class TooltipPo extends BaseComponent {
-  pageUrl = '#/components/tooltip';
+  pageUrl = '/ngx-bootstrap/components/tooltip';
   pageTitle = 'Tooltip';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/tooltip';
 

apps/ngx-bootstrap-docs-e2e/src/support/typeahead.po.ts

@@ -1,7 +1,7 @@
 import { BaseComponent } from './base.component';
 
 export class TypeaheadPo extends BaseComponent {
-  pageUrl = '#/components/typeahead';
+  pageUrl = '/ngx-bootstrap/components/typeahead';
   pageTitle = 'Typeahead';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/typeahead';
 

apps/ngx-bootstrap-docs/project.json

@@ -4,25 +4,32 @@
   "projectType": "application",
   "sourceRoot": "apps/ngx-bootstrap-docs/src",
   "prefix": "ngx-bootstrap-base",
-  "implicitDependencies": ["ngx-bootstrap"],
+  "implicitDependencies": [
+    "ngx-bootstrap"
+  ],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
       "options": {
         "baseHref": "/ngx-bootstrap/",
-        "outputPath": "dist/apps/ngx-bootstrap",
+        "outputPath": "dist/ngx-bootstrap-docs/browser",
         "index": "apps/ngx-bootstrap-docs/src/index.html",
         "main": "apps/ngx-bootstrap-docs/src/main.ts",
         "polyfills": "apps/ngx-bootstrap-docs/src/polyfills.ts",
         "tsConfig": "apps/ngx-bootstrap-docs/tsconfig.app.json",
         "aot": true,
-        "assets": ["apps/ngx-bootstrap-docs/src/assets", "apps/ngx-bootstrap-docs/src/404.html"],
+        "assets": [
+          "apps/ngx-bootstrap-docs/src/assets",
+          "apps/ngx-bootstrap-docs/src/404.html"
+        ],
         "styles": [
           "apps/ngx-bootstrap-docs/src/assets/css/style.scss",
           "apps/ngx-bootstrap-docs/src/assets/css/prettify-angulario.css"
         ],
         "stylePreprocessorOptions": {
-          "includePaths": ["src/datepicker"]
+          "includePaths": [
+            "src/datepicker"
+          ]
         }
       },
       "configurations": {
@@ -89,6 +96,76 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint"
+    },
+    "server": {
+      "executor": "@angular-devkit/build-angular:server",
+      "options": {
+        "outputPath": "dist/ngx-bootstrap-docs/server",
+        "main": "apps/ngx-bootstrap-docs/server.ts",
+        "tsConfig": "apps/ngx-bootstrap-docs/tsconfig.server.json",
+        "stylePreprocessorOptions": {
+          "includePaths": [
+            "src/datepicker"
+          ]
+        }
+      },
+      "configurations": {
+        "production": {
+          "buildOptimizer": true,
+          "outputHashing": "media",
+          "fileReplacements": [
+            {
+              "replace": "apps/ngx-bootstrap-docs/src/environments/environment.ts",
+              "with": "apps/ngx-bootstrap-docs/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "sourceMap": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "sourceMap": true,
+          "extractLicenses": false,
+          "vendorChunk": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve-ssr": {
+      "executor": "@angular-devkit/build-angular:ssr-dev-server",
+      "configurations": {
+        "development": {
+          "browserTarget": "ngx-bootstrap-docs:build:development",
+          "serverTarget": "ngx-bootstrap-docs:server:development"
+        },
+        "production": {
+          "browserTarget": "ngx-bootstrap-docs:build:production",
+          "serverTarget": "ngx-bootstrap-docs:server:production"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "prerender": {
+      "executor": "@angular-devkit/build-angular:prerender",
+      "options": {
+        "routes": [
+          "/"
+        ]
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "ngx-bootstrap-docs:build:production",
+          "serverTarget": "ngx-bootstrap-docs:server:production"
+        },
+        "development": {
+          "browserTarget": "ngx-bootstrap-docs:build:development",
+          "serverTarget": "ngx-bootstrap-docs:server:development"
+        }
+      },
+      "defaultConfiguration": "production"
     }
   }
 }