Visual studio 2022 Angular project template and NX workspace

Question

Visual studio 2022 now has stand alone Angular project template that you can create single angular project similar to how you use cli command to create one. Is there a way to load Angular NX workspace with one angular project and multiple libraries?

Answer 1

Yes, you can add NX to the project. You can choose to keep the CLI project structure or move to the NX structure.
https://nx.dev/migration/migration-angular

Steps I took when doing this:

• Create new VS standalone Angular project (didn't add ASP.NET Web API integration)
• From the command line I ran ng update
• Then, also from the command line, ng add @nrwl/workspace (this will create an NX-style workspace. You can add --preserve-angular-cli-layout to keep the original layout. This command also depends on the version of NX you're using)
• To add a library use nx g @nrwl/angular:library library-name
• To add a component to a library, nx g @nrwl/angular:component comp-name --project lib-name

If you're using the integration with ASP.NET Web API, just make sure you set up CORS on the server. You may also need to modify the package.json to correct the command line params for SSL, as it pertains to the NX parameters. i.e. --ssl-cert is --sslCert, --ssl-key is --sslKey
I could be wrong on that last bit. I am fairly new to using NX with VS. Also, the angular.json may need a path update for your proxy.conf.js.

If you have issues with VS and NX, VS Code has an extension called NX Console that is quite nice for working with NX. No need to memorize NX CLI, and it defaults to dry-running the command, so you can see the effect before you commit to running it.

Alternatively, if you're just looking to add libraries, ng supports the workspace concept as well, and it should work seamlessly with VS.
https://angular.io/guide/file-structure
https://angular.io/guide/file-structure#multiple-projects