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

dasdasdasddsStep 1: Create an Nx Workspace

Skip this step if you already have an Nx Workspace.

This command will create an Nx Workspace.

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

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.

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.

This command will start up the server.

You can now view your app in a browser at http://localhost:4000/

Source Code

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.

Docs

Front End Engineer at Dice.com