How to set two 'projects' build config in Nx workspace project.json similar to angular.json?

Question

Here angular.json file has two project configs:

• one for single-spa, and another config for local dev build. See image and git link:

https://github.com/Abdelrahman-H-Mahmoud/single-spa-demo/blob/main/angular-app/angular.json#L133

Problem: After migration to Nx workspace (v16 and above). Nx only migrates the "angular-app-single" build config to "project.json"

How to modify project.json in Nx worksapce to contain two build config setup similar to angular.json- that is

"projects": {
      "angular-app-single": { /*build 1 code*/},
      "angular-app": { /*build 2 code*/}
}

Note: These are two different configurations in angular.json file for one project. 1.First config “angular-app-single” is using Webpack builder and main.single-spa.ts. 2.Second config is using angular devkit builder and main.ts. The problem is after migration to Nx the project.json file has only one config.

I tried looking at https://nx.dev/ docs.

Answer 1

Solution: I found the solution to my own question:

In Nx workspace project.json file I have added two build configs under targets.

Two build and serve configs: one for single-spa webpack and another for local.

"targets":{ /*see image */}

In each serve update "browserTarget" to respective "build-name"

In addition, open package.json file and update build and serve in "scripts":{}

Answer 2

In NX workspace there are separated projects (https://nx.dev/nx-api/angular).

Therefore having two apps (angular-app-single, angular-app) two or three projects have to be considered:

1. angular-app
2. angular-app-single
3. shared (optional) - code that is shared the two above