Has anyone had much succ…

2 minute read

Has anyone had much success adding angular universal to an angular-nest nx setup? I am a bit unfamiliar with the angular cli builders and noticed this blog post is now out of date with angular 9: https://blog.nrwl.io/nx-workspace-schematics-server-side-rendering-ssr-with-angular-universal-afc04ead55 Medium: Nx workspace schematics: server side rendering (SSR) with Angular Universal

Responses:

welcome Ian, try using this https://www.npmjs.com/package/@ng-toolkit/universal

Before I dive into that project does it do the following:

Say I have the following structure /apps /frontend - angular UI /api - Nest backend Setup by nx. Will that library enable the api project properly rendering the frontend project’s UI using SSR? :stuck_out_tongue: that is unfortunately the exact setup i am hoping for

ah no that will add it to the only the angular app and youll have to have an express server running.

maybe try this package instead https://github.com/nestjs/ng-universal

Yeah my issue currently has been getting the build process working properly between the two separate folders. I got a working version where i created a new cli build task that uses the angular server builder ( @angular-devkit/build-angular:server ) for building the backend while importing the server module from the frontend, but with my lack of knowledge around the builders it feels hacky :stuck_out_tongue: I found I was getting issues when attempting to use the built-in nrwl builder @nrwl/node:build. Oh well might just be too complicated or i need to learn more about how this all works

Thanks for the help btw! I had posted online elsewhere and not gotten nearly as much of an instant response

of course, thats why i created this community! Just pass on the help if you can :smile: is it a build only issues? are you able to serve it with ng s?

Sorry, doing a little research to show exactly what I am seeing so i do not misspeak! I’ll get back to you in a bit

Hey ian, I would suggest using this as it is the official nest package for universal

https://github.com/nestjs/ng-universal

Depending on how you want to use it? I prefer to have a clear separation.

• Means my backend service are apps self (microservices with nestjs) • frontend application like you get it from @nrwl/angular • and angular-universal with the offical package works without any problems (uses express as server) In this way your angular universal application is just related to you angular application -> need to be and your backends have their own context

would look like this apps/ /frontend-app -> angular + offical nguniversal package /backend-app -> nestjs

in 1 or 2 days I will release the new version of nx-deploy-it and it will support angular-universal too.

Released version 1.3 of nx-deploy-it with angular universal support for AWS and azure. Gcp is coming soon.

Just install the official @nguniversal/express-engine and it will prepare your angular app with universal support

After it add @dev-thought/nx-deploy-it It automatically triggers ng-add schematic and Scans your workspace and should recognize the universal app ;)

If you use nx instead of ng as workspace format just run npx nx g @dev-thought/nx-deploy-it:scan

Tell me if you hit any problems ;)

Updated: