angulartypescriptnrwl-nxnrwlsingle-spa-angular

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


Here angular.json file has two project configs:

enter image description here

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.


Solution

  • 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 */}
    

    enter image description here

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

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