Angular Universal server-side rendering (SSR) in Nrwl Nx

Warning: This tutorial is outdated. It was written for nrwl 11 and angular 11. Please refer to the latest documentation for accurate details.

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”.

The questions you will be prompted with when creating a new workspace.

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

The questions you will be prompted with when creating a new angular app.

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.

Here you can see “apps” was dropped from the path when we added the express engine.

The corrected path.

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.

The path change we need to make in server.ts

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/

Source Code

jared-christensen/nx-angular-universal

Inspiration

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.

Angular Universal with Nrwl Nx

Nx workspace schematics: server side rendering (SSR) with Angular Universal

Docs

Angular

getting-started: Getting Started | Nx angular documentation