Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.

your call will render a static App, when you call it from the client side it will render the whole thing with functionalities and styles

your questions is a bit general, if you give more details about the problem you are trying to solve, maybe I can help you more, because sending token, user id and other parameters does not need the universal angular

Angular Universal is for server side rendering of the Angular app, and it is created because search engines couldn't see the app when crawling, so the app would never appear in the search. So, it is only for the SEO optimization purposes.

That said, if your pages will require Http Headers (i.e. UserId, Security Token, etc.), the search bots will not send these when crawling, so there is no point for you to have server side rendering. All the routes that you want to be indexed, has to be open (without required authentication) in order for search engine to crawl it and index it.

You need to use theSupplyData delegate of the SpaPrerenderingOptions

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

This data becomes available in the main.server.ts at the call to createServerRenderer

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

Then you can once again retrieve the values in your pages:

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);
    }
  }

}

You can find a complete example here

• Startup
• main.server.ts
• main.ts: Here you must have the same providers
• Inject your provider in a page and use its value

I strongly recommend passing just a single object from .NET to angular-server-side, all the way through (I named it dataFromServer). I didn't do it this way and I see the potential for errors now.

• Have only one data["dataFromServer"] assignment
• Add only 2 providers to your main.*.ts files:
  • SERVER_SIDE: true in main.server.ts, falsein main.ts
  • DATA_FROM_SERVER: null in main.ts

Also to determine what page is to be rendered I created a nuget package

Note that the delegate passed to SupplyData can no longer be async.

As for the server-side rendered response lacking styling, you usually needed to update angular.json and set projects:ClientApp:architect:server:options:extractCss to true, but it seems like this was changed recently and it defaults to true now. I don't have it anymore in my angular.json and my website returns a fully styled ssr-response.