Feature: Introduce "render" function for Angular v16 projects

[brandonroberts]

Which scope/s are relevant/related to the feature request?

create-analog

Information

To server render an Angular v16 application, the following setup is needed.

import 'zone.js/node';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideServerRendering,
  renderApplication,
  ɵSERVER_CONTEXT as SERVER_CONTEXT,
} from '@angular/platform-server';

import { AppComponent } from './app/app.component';
import { mainProviders } from './main.providers';

if (import.meta.env.PROD) {
  enableProdMode();
}

export function bootstrap() {
  return bootstrapApplication(AppComponent, {
    providers: [
      mainProviders,
      provideServerRendering(),
      { provide: SERVER_CONTEXT, useValue: 'analog' },
    ],
  });
}

export default async function render(url: string, document: string) {
  const html = await renderApplication(bootstrap, {
    document,
    url,
  });

  return html;
}

The render function would accept the root component and application config and return a function that is used for server rendering.

import 'zone.js/node';
import { AppComponent } from './app/app.component';
import { config } from './app.config.server';
import { render } from '@analogjs/platform/server';

export default render(AppComponent, config);

It would include the following providers

• provideServerRendering()
• { provide: SERVER_CONTEXT, useValue: 'analog' }
• Any providers added through the application config

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[R-Bower]

@brandonroberts is the BrowserAnimationsModule going to be supported? I'm having trouble getting my components with animations to work. Wondering if this should be added to the bootstrap function.

[brandonroberts]

@brandonroberts is the BrowserAnimationsModule going to be supported? I'm having trouble getting my components with animations to work. Wondering if this should be added to the bootstrap function.

If you're using standalone, you only need to add provideAnimations() in the main.ts providers as it's client only.

[R-Bower]

@brandonroberts is the BrowserAnimationsModule going to be supported? I'm having trouble getting my components with animations to work. Wondering if this should be added to the bootstrap function.

If you're using standalone, you only need to add provideAnimations() in the main.ts providers as it's client only.

What about for the Astro integration?

[brandonroberts]

@brandonroberts is the BrowserAnimationsModule going to be supported? I'm having trouble getting my components with animations to work. Wondering if this should be added to the bootstrap function.

If you're using standalone, you only need to add provideAnimations() in the main.ts providers as it's client only.

What about for the Astro integration?

There is an open issue for supporting passing providers to the render/client bootstrap, which is separate from this.

[goetzrobin]

@brandonroberts if you like the template used for the nx plugin (added here) I can also add the new template to create-analog.

[R-Bower]

Definitely looking forward to this. I'm planning on building my component library docs in Astro, but need support for Angular Animations and root services before that can happen.

[brandonroberts]

You can do this now

https://analogjs.org/docs/packages/astro-angular/overview#adding-component-providers