Creating an Nx Workspace with Standalone Angular Host and Remote Applications

In this article we are going to learn how to create an nx-workspace from scratch. Then we add Angular standalone host and remote applications.

In near future developers will not even know how to develop with ng modules so it is time to begin building new applications with standalone components.

If you are familiar with Nx Workspace then you might notice after Release 14.6.0 · nrwl/nx (github.com) nx added standalone host and remote generation support.

At the time I wrote this article I use:
node v16.20.0
npm v8.19.4
nx@16.1.4
angular@16.0.0

First, we create an nx workspace using

npx create-nx-workspace@16.1.4

It will prompt you “Choose what to create”. You have to choose “Integrated monorepo [Nx configures your favorite frameworks and lets you focus on shipping features]”.

Do not choose “Standalone Angular app” it will create an nx workspace with a single standalone Angular application into it which is not our case. We want to create individual host and remote standalone applications, so we have to create them manually.

After choosing “Integrated monorepo” there comes a new prompt saying “What to create in the new workspace”. Choose “apps [an empty monorepo with no plugins with a layout that works best for building apps]”.

After choosing “apps” it will ask you for the Repository name which will be name of the workspace, folder name of the root, prefix for the generated component selectors… etc.

After giving the repository name it will ask if you will use distributed caching. It will be your decision whether to use distributed caching or not. I will not use it in this tutorial so if you are interested learn more about distributed caching at here.

After that it will create nx workspace and installs dependencies which will be completed quickly because no actual application is installed at this point.

Now let's move on to create our host and remote applications.

First, open package.json at root and add "@nx/angular":"16.1.4" to devDependencies then run npm install.

Starting from release 16.0.0-beta.3 Nx replaces @nrwl usages with @nx

package.json at root

This package will allow you to create Angular applications.

After installation complete run:

npx nx generate @nx/angular:host host --remotes=remote1 --standalone --standaloneConfig --no-interactive

It will create, link and configure a standalone host application named host and a standalone remote application named remote1 inside apps folder. This command will run much longer because it will install all the dependencies for an Angular application to work.

After the generation completed you may see that package.json is much crowded with Angular dependencies.

bootstrap.ts in host application

If we inspect host application we indeed see that there in no app.module.ts. All the routes are placed inside app.routes.ts which are configured in app.config.ts and we see in bootstrap.ts it actually bootstraps the AppComponent not the module.

bootstrap.ts in remote1 application

If we inspect remote1 application we see that there in no app.module or app.component. RemoteEntryComponent became the bootstrap component.

module-federation.config.js

If we inspect module-federation.config.js in remote1 application we can see that it exposes the entry.routes.ts not the module.

Now we have full standalone application in both host and remote.

So, how do we start the application?

Open package.json at root and add a start in scripts section.

  "scripts": {
    "start": "nx run host:serve:development --devRemotes=remote1"
  },

After that run npm start at your terminal and when the compliation is completed navigate to http://locahost:4200 in your browser.

localhost:4200

You may see that our host application is up and running. You may navigate through links at the top and when you click Remote1 it will be loaded from remote application which is served through localhost:4201.

remoteEntry.mjs is loaded from localhost:4201

In this article we learn how to create and run an nx workspace with standalone host and remote apps.

For more information on Nx: Angular Standalone Tutorial — Part 1: Code Generation | Nx

You may download the sample project on github
ermaneng/medium-nx-standalone (github.com)

Best
ermaneng