Why nrwl/nx is better that angular@6 vanilia?

Question

Biggest advantage og nrwl/nx was implementing multiple workspaces in one project. Now angular 6 supperts it as well. What are other adventages of nx over angular@6 ?

Answer 1

nx is amazing, i'm using it because we have 5 angular applications in a big project,and i think that nrwl/nx is made for complex enterprise applications, so if you have a big project composed of many frontend applications it will be useful, but even for a single app that will give you many advantages, here is some benefits of nx :

• you will have a monorepo for all your apps that share the same package.json, so you have to manage packages once for all your apps
• more consistency and productivity
• you can create libs that can be shared between your apps,it will save your time, and the team say that it's better to put all your logic code inside libs even if they are not shared between apps
• more options for code generation if we compare it with the standard cli
• you will have a great routing and state management (ngrx) implementation (implemented the right one)
• build time improvement: with nx you will avoid re-executing unnecessary builds, so if you make some changes on a lib, nx will make sure that only apps that depend on it will build.
• the future of nx is to have a powerful mono repo tool with a great build system (a version of Bazel for nx) and may your project ready for CI

with one command you can build or test apps affected by your changes

yarn affected:build --all --prod
yarn affected:test --all --prod

• Now it's possible to generate many types of frontend applications ANGULAR , REACT // for generateing a react app ng add @nrwl/react # Add React capabilities to your workspace ng g @nrwl/react:application reactAppName

   // for generating an angular app ng add @nrwl/angular ng g @nrwl/angular:application angularAppName 

• Generate backend applications for your frontend app like Nest and create shared libs between frontend and backend apps in a flexible way

   ng add @nrwl/nest ng g @nrwl/nest:app api --frontendProject=YOU_FRONTEND_PROJECT // link the generate nest app to a specific frontend app 

Answer 2

It has tools that help you build only the apps you make changes too. So if you make a change in a shared library it can figure out what apps use that library item and only build them.

Answer 3

Personally, I find it convenient that I can debug my libraries and that I don't have to build them to use them when I use NX. This is a pretty simple item that is some tsconfig magic but it does make it much easier.

Additionally, while it is basically the same structure as the Angular CLI 6 the subtle differences make more sense to me.

Answer 4

I have used and advocated for Nx at my last two jobs and (mostly) love it.

I have continued to use it over plain Angular because they keep adding new tooling, which supports more complex applications, and makes takes away a lot of the pain associated with setting up a modern javascript web app (namely config and set up hell when gluing together modern web development libraries).

They have committed to developing their product in a way which supports, rather than moves away from Angular, but gives access to nice developer friendly workflows which support other tooling than the Angular CLI does out of the box.

For instance, they recently added support for Cypress e2e testing, including project set up, scripts for running the tests, as well as commands to only run tests on bits of your project that were affected by your last change.

They are also very responsive to requests, and have implemented several fixes/minor features that members of my team have suggested.

To summarise, it is the sheer pace at which they seem to release shiny new add-ons to the already powerful Angular CLI, which make it a compelling offering.

However, if your application is not very complex, you would probably not need a lot of these features.

If you're interested, I have written a couple of posts detailing how I've used it in the past, and recently touching on the Cypress stuff:

http://wtfisanapi.com/wtf-is-nrwl-nx/

http://wtfisanapi.com/htf-do-i-write-e2e-tests-with-a-stubbed-dependency-angular-nrwl-nx-edition/