Step 1: Create an Nx Workspace
Skip this step if you already have an Nx Workspace.
This command will create an Nx Workspace.
npx create-nx-workspace --preset=angular
I named my workspace “MyOrg” and my Angular application “MyApp”.
Step 2: Add an Angular App to Your Workspace
Skip this step if you ran step 1 or have already added an app in your workspace that you want to work with.
The next command will generate a new Angular app “MyApp” inside of your “MyOrg” workspace. This command will need to be run from your workspace root directory ‘my-org’.
npx nx generate @nrwl/angular:app MyApp
Step 3: Add the Angular Express Engine
Next, we need to add the Angular Express Engine to “my-app”. The following command will do just that.
npx ng add @nguniversal/express-engine --clientProject my-app
Step 4: Update outputPath
Running the above command will add the express engine, but it was not designed for the Nx workspace. We will have to manually fix some paths. Below you can see how “apps” was dropped from the path. We will add that back in now.
Step 5: Update server distFolder
Inside of the generated server.ts file (apps > my-app > server.ts) we need to add “apps” to the distFolder path much like we did above in step 4.
Step 6: Build and Serve
This command will build the app and create the dist folder.
npm run build:ssr
This command will start up the server.
npm run serve:ssr
You can now view your app in a browser at http://localhost:4000/
This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…
These articles helped me get started. I think angular universal changed slightly and the referenced articles have fallen a bit behind, but they do have helpful information.
Nx workspace schematics: server side rendering (SSR) with Angular Universal
How to add manually SSR feature to an Angular application, then automating the process with schematic for a better…
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…