feat(router): introduce support for Analog Server Components (#1518)

apps/analog-app/src/app/app.config.server.ts

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

apps/analog-app/src/app/pages/client/(client).page.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ServerOnly } from '@analogjs/router';
+
+@Component({
+  standalone: true,
+  imports: [ServerOnly],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h2>Client Component</h2>
+
+    <ServerOnly component="hello" [props]="props()" (outputs)="log($event)" />
+
+    <ServerOnly component="hello" [props]="props2()" (outputs)="log($event)" />
+
+    <p>
+      <button (click)="update()">Update</button>
+    </p>
+  `,
+})
+export default class ClientComponent {
+  props = signal({ name: 'Brandon', count: 0 });
+  props2 = signal({ name: 'Brandon', count: 4 });
+
+  update() {
+    this.props.update((data) => ({ ...data, count: ++data.count }));
+  }
+
+  log($event: object) {
+    console.log({ outputs: $event });
+  }
+}

apps/analog-app/src/app/pages/goodbye.page.analog

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ServerOnly } from '@analogjs/router' with { analog: 'imports' };
+</script>
+
+<template>
+  Goodbye on the client
+
+  <ServerOnly component="goodbye" />
+</template>

apps/analog-app/src/app/pages/server/(server).page.ts

@@ -0,0 +1,11 @@
+import { RouteMeta } from '@analogjs/router';
+
+import { ServerOnly } from '@analogjs/router';
+
+export const routeMeta: RouteMeta = {
+  data: {
+    component: 'hello',
+  },
+};
+
+export default ServerOnly;

apps/analog-app/src/main.server.ts

@@ -1,31 +1,8 @@
 import 'zone.js/node';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import type { ServerContext } from '@analogjs/router/tokens';
+import '@angular/platform-server/init';
+import { render } from '@analogjs/router/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,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(AppComponent, config);

apps/analog-app/src/server/components/goodbye.ag

@@ -0,0 +1,3 @@
+<template>
+  Goodbye from the server
+</template>

apps/analog-app/src/server/components/hello.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+
+import {
+  injectStaticOutputs,
+  injectStaticProps,
+} from '@analogjs/router/server';
+
+@Component({
+  selector: 'app-hello',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h3>Hello From the Server</h3>
+
+    <p>Props: {{ json() }}</p>
+
+    <p>Time: {{ Date.now().toString() }}</p>
+  `,
+  styles: `
+    h3 {
+      color: blue;
+    }
+  `,
+})
+export default class HelloComponent {
+  Date = Date;
+  props = injectStaticProps();
+  outputs = injectStaticOutputs<{ loaded: boolean }>();
+  json = computed(() => JSON.stringify(this.props));
+
+  ngOnInit() {
+    this.outputs.set({ loaded: true });
+  }
+}

apps/analog-app/tsconfig.app.json

@@ -10,6 +10,7 @@
   "include": [
     "src/**/*.d.ts",
     "src/app/pages/**/*.page.ts",
+    "src/server/components/**/*.ts",
     "src/server/middleware/**/*.ts"
   ],
   "exclude": ["**/*.test.ts", "**/*.spec.ts"]

apps/analog-app/vite.config.ts

@@ -32,13 +32,16 @@ export default defineConfig(({ mode }) => {
         additionalPagesDirs: ['/libs/shared/feature'],
         additionalAPIDirs: ['/libs/shared/feature/src/api'],
         prerender: {
-          routes: ['/', '/cart', '/shipping'],
+          routes: ['/', '/cart', '/shipping', '/client'],
           sitemap: {
             host: base,
           },
         },
         vite: {
           inlineStylesExtension: 'scss',
+          experimental: {
+            supportAnalogFormat: true,
+          },
         },
       }),
       nxViteTsPaths(),

apps/blog-app/src/main.server.ts

@@ -1,31 +1,8 @@
 import 'zone.js/node';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import '@angular/platform-server/init';
+import { render } from '@analogjs/router/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,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(AppComponent, config);

apps/trpc-app/src/main.server.ts

@@ -1,20 +1,8 @@
 import 'zone.js/node';
-import { enableProdMode } from '@angular/core';
-import { renderApplication } from '@angular/platform-server';
-import { AppComponent } from './app/app.component';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { config } from './app.config.server';
-
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
+import '@angular/platform-server/init';
+import { render } from '@analogjs/router/server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+import { config } from './app.config.server';
+import { AppComponent } from './app/app.component';
 
-export default async function render(url: string, document: string) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-  });
-  return html;
-}
+export default render(AppComponent, config);

packages/create-analog/template-blog/src/main.server.ts

@@ -1,32 +1,8 @@
 import 'zone.js/node';
 import '@angular/platform-server/init';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import { render } from '@analogjs/router/server';
 
 __APP_COMPONENT_IMPORT__
 import { config } from './app/app.config.server';
 
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(__APP_COMPONENT__, config);
-}
-
-export default async function render(
-  url: string,
-  document: string,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(__APP_COMPONENT__, config);

packages/create-analog/template-latest/src/main.server.ts

@@ -1,32 +1,8 @@
 import 'zone.js/node';
 import '@angular/platform-server/init';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import { render } from '@analogjs/router/server';
 
 __APP_COMPONENT_IMPORT__
 import { config } from './app/app.config.server';
 
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(__APP_COMPONENT__, config);
-}
-
-export default async function render(
-  url: string,
-  document: string,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(__APP_COMPONENT__, config);

packages/create-analog/template-minimal/src/main.server.ts

@@ -1,32 +1,8 @@
 import 'zone.js/node';
 import '@angular/platform-server/init';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import { render } from '@analogjs/router/server';
 
 __APP_COMPONENT_IMPORT__
 import { config } from './app/app.config.server';
 
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(__APP_COMPONENT__, config);
-}
-
-export default async function render(
-  url: string,
-  document: string,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(__APP_COMPONENT__, config);

packages/nx-plugin/src/generators/app/files/template-angular-v18/src/main.server.ts__template__

@@ -1,32 +1,8 @@
 import 'zone.js/node';
 import '@angular/platform-server/init';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import { render } from '@analogjs/router/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,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(AppComponent, config);

packages/platform/src/lib/deps-plugin.ts

@@ -69,7 +69,6 @@ export function depsPlugin(options?: Options): Plugin[] {
             return pkgJson['module'] && pkgJson['module'].includes('fesm');
           },
         });
-
         return pkgConfig;
       },
     },