Angular Universal se ejecuta en el servidor, generando páginas de aplicaciones estáticas que luego se inician en el cliente.

su llamada generará una aplicación estática, cuando la llame desde el lado del cliente, generará todo con funcionalidades y estilos

su pregunta es un poco general, si da más detalles sobre el problema que está tratando de resolver, tal vez pueda ayudarlo más, porque enviar token, identificación de usuario y otros parámetros no necesita el angular universal

Angular Universal es para la representación del lado del servidor de la aplicación Angular, y se creó porque los motores de búsqueda no pudieron ver la aplicación al rastrear, por lo que la aplicación nunca aparecería en la búsqueda. Por lo tanto, es solo para fines de optimización SEO.

Dicho esto, si sus páginas requerirán encabezados Http (es decir, ID de usuario, token de seguridad, etc.), los robots de búsqueda no los enviarán al rastrear, por lo que no tiene sentido que tenga una representación del lado del servidor. Todas las rutas que desea indexar deben estar abiertas (sin la autenticación requerida) para que el motor de búsqueda las rastree e indexe.

Debe usar el delegado SupplyData de SpaPrerenderingOptions

 `options.SupplyData = (context, data) => { data["dataFromServer"] = new { // Here you can pass the data to angular item1 = "Hello world", item2 = 5, item3 = true }; }

Estos datos están disponibles en main.server.ts en la llamada a createServerRenderer

 export default createServerRenderer(params => { /* read params.data.dataFromServer */ providers.push({ provide: 'SERVER_SIDE', useValue: true }, { provide: 'DATA_FROM_SERVER', useValue: params.data.dataFromServer }); });

Luego, puede volver a recuperar los valores en sus páginas:

 export class ArtistShowComponent { constructor( private route: ActivatedRoute, @Inject(SERVER_SIDE) serverSide: boolean, @Inject('DATA_FROM_SERVER') dataFromServer: any, ... ) { if (serverSide === true) { this.setArtist(dataFromServer.artist); } else { var id = parseInt(this.route.snapshot.paramMap.get('id')); this.loadArtist(id); } } }

Puedes encontrar un ejemplo completo aquí

• Puesta en marcha
• principal.servidor.ts
• main.ts : Aquí debe tener los mismos proveedores
• Inyecte su proveedor en una página y use su valor

Recomiendo encarecidamente pasar solo un objeto de .NET al lado del servidor angular, hasta el final (lo llamé dataFromServer ). No lo hice de esta manera y ahora veo el potencial de errores.

• Tener solo una asignación data["dataFromServer"]
• Agregue solo 2 proveedores a sus archivos main.*.ts :
  • SERVER_SIDE: true en main.server.ts, false en main.ts
  • DATA_FROM_SERVER: null en main.ts

También para determinar qué página se representará, creé un paquete nuget

Tenga en cuenta que el delegado pasado a SupplyData ya no puede ser async .

En cuanto a la respuesta renderizada del lado del servidor que carece de estilo, generalmente necesitaba actualizar angular.json y establecer projects:ClientApp:architect:server:options:extractCss en true , pero parece que esto se cambió recientemente y ahora está predeterminado en true . Ya no lo tengo en mi angular.json y mi sitio web devuelve una respuesta ssr con estilo completo.