How to add Angular to an existing empty NX workspace

#angular #nx #webdev #javascript

Well, this article is about...what the title says :D
I was trying to find this over the internet and couldn't find an easy answer. But with the amazing SEO of Dev.to, I'm really confident that people searching for the same can easily find how to do it.

Problem:

If you have an empty NX repository, i.e. not created with the angular preset, you can't run the following command to create an Angular app:



ng generate app myApp

That's because you'll probably get this error:

And what it means is that we can't really run ng commands unless we have the angular.json file present in the project's root folder and Angular is already set up. Ergo, we can't add Angular to this empty NX repository this way.

Solution:

You need to install the @nrwl/angular package into the repository as follows:



npm install --save-dev @nrwl/angular
#or
yarn add -D @nrwl/angular

Now you can run the following command to generate an Angular app within the repo. This will also configure the nx workspace to be able to work with Angular apps/libraries.



nx g @nrwl/angular:application myApp

Thank me later :D

Conclusion

If you found the article useful, make sure to hit the like or the bookmark icon. Check out my YouTube Channel for more amazing content. And if you feel adventurous and are interested in taking your #Angular skills to the next level, check out the Angular Cookbook. It's awesome!