feat: update to Angular v16 RC.0 and Analog 0.2.0-beta.0 packages

package.json

@@ -14,17 +14,17 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^0.1.0",
+    "@analogjs/content": "latest",
     "@analogjs/router": "latest",
-    "@angular/animations": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/platform-server": "^15.0.0",
-    "@angular/router": "^15.0.0",
+    "@angular/animations": "^16.0.0-rc.0",
+    "@angular/common": "^16.0.0-rc.0",
+    "@angular/compiler": "^16.0.0-rc.0",
+    "@angular/core": "^16.0.0-rc.0",
+    "@angular/forms": "^16.0.0-rc.0",
+    "@angular/platform-browser": "^16.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "^16.0.0-rc.0",
+    "@angular/platform-server": "^16.0.0-rc.0",
+    "@angular/router": "^16.0.0-rc.0",
     "@nrwl/angular": "~15.4.0",
     "date-fns": "^2.29.3",
     "front-matter": "^4.0.2",
@@ -34,21 +34,21 @@
     "rxjs": "~7.5.6",
     "tslib": "^2.4.0",
     "util": "^0.12.5",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
     "@analogjs/platform": "latest",
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular/cli": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.0.0-rc.0",
+    "@angular/cli": "^16.0.0-rc.0",
+    "@angular/compiler-cli": "^16.0.0-rc.0",
     "@nrwl/vite": "^15.4.0",
     "autoprefixer": "^10.4.13",
     "install": "^0.13.0",
     "jsdom": "^20.0.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4",
-    "typescript": "~4.8.4",
+    "typescript": "~5.0.4",
     "vite": "^4.0.3",
     "vitest": "^0.25.8"
   }
-}
+}

src/app/app.config.server.ts

@@ -0,0 +1,15 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import {
+  provideServerRendering,
+  ɵSERVER_CONTEXT as SERVER_CONTEXT,
+} from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),
+    { provide: SERVER_CONTEXT, useValue: 'ssr-analog' },
+  ],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideFileRouter } from '@analogjs/router';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFileRouter(),
+    provideHttpClient(),
+    provideClientHydration(),
+    provideContent(withMarkdownRenderer())
+  ],
+};

src/app/pipes/reading-time.pipe.ts

@@ -7,7 +7,7 @@ import readingTime from 'reading-time';
   standalone: true,
 })
 export class ReadingTimePipe implements PipeTransform {
-  transform(content: string): number {
-    return Math.round(readingTime(content).minutes);
+  transform(content: string | undefined): number {
+    return content ? Math.round(readingTime(content).minutes) : 0;
   }
 }

src/main.server.ts

@@ -1,26 +1,23 @@
 import 'zone.js/node';
 import { enableProdMode } from '@angular/core';
-import { renderApplication, ɵSERVER_CONTEXT } from '@angular/platform-server';
-import { provideFileRouter } from '@analogjs/router';
-import { withEnabledBlockingInitialNavigation } from '@angular/router';
-import { provideContent, withMarkdownRenderer } from '@analogjs/content';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { renderApplication } from '@angular/platform-server';
 
+import { config } from './app/app.config.server';
 import { AppComponent } from './app/app.component';
 
 if (import.meta.env.PROD) {
   enableProdMode();
 }
 
+export function bootstrap() {
+  return bootstrapApplication(AppComponent, config);
+}
+
 export default async function render(url: string, document: string) {
-  const html = await renderApplication(AppComponent, {
-    appId: 'analog-app',
+  const html = await renderApplication(bootstrap, {
     document,
     url,
-    providers: [
-      provideFileRouter(withEnabledBlockingInitialNavigation()),
-      provideContent(withMarkdownRenderer()),
-      { provide: ɵSERVER_CONTEXT, useValue: 'analog-ssg' }
-    ],
   });
 
   return html;

src/main.ts

@@ -1,13 +1,7 @@
 import 'zone.js';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideFileRouter } from '@analogjs/router';
-import { provideContent, withMarkdownRenderer } from '@analogjs/content';
 
 import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideFileRouter(),
-    provideContent(withMarkdownRenderer())
-  ],
-});
+bootstrapApplication(AppComponent, appConfig);

vite.config.ts

@@ -12,7 +12,6 @@ export default defineConfig(({ mode }) => ({
   },
   plugins: [
     analog({
-      ssr: true,
       static: true,
       prerender: {
         routes: async() => ['/', '/about', '/blog', '/talks', ...posts.map(post => `/blog/posts/${post.replace('.md', '')}`)]