✨ prerender demo

.github/workflows/gh-pages.yaml

@@ -67,9 +67,4 @@ jobs:
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          FOLDER: dist/ngx-mat-timepicker-repo
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./dist/ngx-mat-timepicker-repo
+          FOLDER: dist/ngx-mat-timepicker-repo/browser

angular.json

@@ -58,11 +58,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/ngx-mat-timepicker-repo",
             "index": "projects/ngx-mat-timepicker-repo/src/index.html",
-            "main": "projects/ngx-mat-timepicker-repo/src/main.ts",
+            "browser": "projects/ngx-mat-timepicker-repo/src/main.ts",
+            "server": "projects/ngx-mat-timepicker-repo/src/main.server.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -78,7 +79,8 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "prismjs"
-            ]
+            ],
+            "prerender": true
           },
           "configurations": {
             "production": {
@@ -103,12 +105,11 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "prerender": false
             }
           },
           "defaultConfiguration": "production"

package.json

@@ -25,7 +25,7 @@
     "start": "ng serve",
     "test": "ng test",
     "build": "ng build ngx-mat-timepicker --configuration=production",
-    "build:demo": "ng build ngx-mat-timepicker-repo --configuration=production --base-href=",
+    "build:demo": "ng build ngx-mat-timepicker-repo --configuration=production",
     "link": "npm link ./dist/ngx-mat-timepicker",
     "publish": "npm publish ./dist/ngx-mat-timepicker --access=public",
     "publish:beta": "npm publish ./dist/ngx-mat-timepicker --tag beta --access=public",
@@ -42,6 +42,9 @@
     "@angular/material": "^17.0.0",
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/platform-server": "^17.0.3",
+    "@angular/router": "^17.0.3",
+    "@angular/ssr": "17.0.1",
     "rxjs": "^7.4.0",
     "ts-luxon": "^4.3.2",
     "tslib": "^2.5.2",

projects/ngx-mat-timepicker-repo/src/app/app.component.html

@@ -1,5 +1 @@
-@if (isDemo) {
-  <app-demo />
-} @else {
-  <app-test />
-}
+<router-outlet />

projects/ngx-mat-timepicker-repo/src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
-//
-import { NGX_MAT_TIMEPICKER_ENVIRONMENT } from '../environments/environment';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RouterOutlet],
 })
-export class NgxMatTimepickerAppComponent {
-  isDemo: boolean = NGX_MAT_TIMEPICKER_ENVIRONMENT.isDemo;
-}
+export class AppComponent {}

projects/ngx-mat-timepicker-repo/src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

projects/ngx-mat-timepicker-repo/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatNativeDateModule, NativeDateModule } from '@angular/material/core';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideRouter(routes),
+    provideClientHydration(),
+    importProvidersFrom([NativeDateModule, MatNativeDateModule]),
+  ],
+};

projects/ngx-mat-timepicker-repo/src/app/app.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () =>
+      import('./components/demo/demo.component').then((m) => m.DemoComponent),
+  },
+  {
+    path: 'test',
+    loadComponent: () =>
+      import('./components/test/test.component').then((m) => m.TestComponent),
+  },
+];

projects/ngx-mat-timepicker-repo/src/app/components/demo/demo.component.ts

@@ -45,7 +45,7 @@ interface NgxMatTimepickerTheme {
     CodeViewerComponent,
   ],
 })
-export class NgxMatTimepickerDemoComponent implements OnInit {
+export class DemoComponent implements OnInit {
   get currentLocale(): string {
     return this._localeOverrideSrv.locale;
   }

projects/ngx-mat-timepicker-repo/src/app/components/test/test.component.ts

@@ -15,7 +15,7 @@ import {
   NgxMatTimepickerFieldComponent,
 } from '@alexfriesen/ngx-mat-timepicker';
 //
-import { NgxMatTimepickerDemoComponent } from '../demo/demo.component';
+import { DemoComponent } from '../demo/demo.component';
 
 @Component({
   selector: 'app-dialog',
@@ -67,7 +67,7 @@ export class NgxMatTimepickerTestDialogComponent {
     NgxMatTimepickerFieldComponent,
   ],
 })
-export class NgxMatTimepickerTestComponent extends NgxMatTimepickerDemoComponent {
+export class TestComponent extends DemoComponent {
   formControlItem: FormControl = new FormControl('', [
     Validators.pattern(/([0-9]|[1-2]\d):[0-5]\d/),
   ]);

projects/ngx-mat-timepicker-repo/src/index.html

@@ -8,18 +8,18 @@
     />
     <meta
       name="description"
-      content="ngx-mat-timepicker is a true Angular Material time picker library. Using Angular 15 CDK and Material to create a timepicker component which integrates with your material theme."
+      content="ngx-mat-timepicker is a true Angular Material time picker library. Using Angular 17 CDK and Material to create a timepicker component which integrates with your material theme."
     />
     <meta
       name="keywords"
-      content="angular 15, angular, material, timepicker, time, picker, angular 2+, angular 8+"
+      content="angular 17, angular, material, timepicker, time, picker, angular 2+, angular 17+"
     />
     <title>ngx-mat-timepicker</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
       rel="stylesheet"
     />
   </head>

projects/ngx-mat-timepicker-repo/src/main.server.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

projects/ngx-mat-timepicker-repo/src/main.ts

@@ -1,7 +1,8 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { NgxMatTimepickerAppModule } from './app/app.module';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(NgxMatTimepickerAppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

projects/ngx-mat-timepicker-repo/tsconfig.app.json

@@ -6,7 +6,8 @@
     "resolveJsonModule": true,
   },
   "files": [
-    "src/main.ts"
+    "src/main.ts",
+    "src/main.server.ts",
   ],
   "include": [
     "src/**/*.d.ts"