Canonical setup for Angular Universal cannot currently be converted to Nx Workspace

[JamesHenry]

We do not support converting projects which have multiple apps within their .angular-cli.json file.

In the case of Angular Universal, the currently recommended way to configure it is to have a second app for the server-side aspect of your application (be that pre-rendering or request time SSR).

This effectively means that apps which have been set up to do pre or server-side rendering cannot easily be converted to use Nx as it stands.

Reference from Angular CLI documentation:
https://github.com/angular/angular-cli/wiki/stories-universal-rendering#step-3-create-a-new-project-in-angular-clijson

Whilst going through this process myself, I also discovered #134.

[a5hik]

With the Angular CLI 6 supporting multiple apps, should this no longer be an issue now? anyone tried Server side rendering for nx apps?

[matthewharwood]

@a5hik It would appear it's not working.

[jorroll]

@a5hik My nx workspace has 3 apps which all support SSR. I don't believe there is any question of support for SSR in NX, this issue is discussing how to convert an existing, non-nx monorepo, that contains multiple apps within .angular-cli.json, into an nx workspace.

We do not support converting projects which have multiple apps

Apparently, converting an existing monorepo to nx doesn't work if the monorepo already has multiple projects within it (which will be the case for apps with SSR). In my case, I created the nx workspace first, then added apps with SSR to it, so I never encountered this problem.

To see a working nx + SSR setup, you can check out this very helpful starter repo https://github.com/beeman/angular-nx-ssr.

Note: I don't think the repo has been updated to use CLI v6

[beeman]

@thefliik hey - glad to hear my repo has been useful! I will update it one of these days with the latest versions of Angular + NX

[FrozenPandaz]

This works more now with Nx6.

ng new universalproject
cd universalproject
ng g universal --client-project universalproject
ng add @nrwl/schematics

This should mostly work after a coming release. Something you might have to tweak yourself for now is the server configuration in architect. The paths aren't updated which I will handle soon. You may also want to move the tsconfig.server.json file

The server configuration should look like

-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/uniproject-server",
-            "main": "src/main.server.ts",
-            "tsConfig": "src/tsconfig.server.json"
-          }
-        }

+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/apps/universalproject-server",
+            "main": "apps/universalproject/src/main.server.ts",
+            "tsConfig": "apps/universalproject/tsconfig.server.json"
+          }
+        }

[matthewharwood]

@FrozenPandaz #543 new error when ng add @nrwl/schematics

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.