3.7 KiB
Nx and Angular CLI
Nx is not a replacement for Angular CLI. Under the hood, Nx uses the Angular CLI to generate code and run tasks.
When you run nx build myapp, Nx will invoke ng build myapp under the hood. When you run nx g component mycmp, Nx will invoke ng g component mycmp under the hood.
When it comes to generating code and running tasks, since nx delegates to ng, both CLIs will always produce the same result, except that running nx will often run a lot faster.
How?
Nx CLI uses advanced code analysis and computation caching to reuse previous computation results when possible. The Angular CLI doesn't do it. In other words, use nx instead of ng: everything will work just the same but often much faster.
The Nx CLI also supports a lot more commands than the Angular CLI. It can run a target against many projects in parallel, run a target against a project and its dependencies, etc..
What does Nx add in addition to being faster?
Using effective development practices pioneered at Google
Using Nx, you can implement monorepo-style development--an approach popularized by Google and used by many tech companies today (Facebook, Uber, Twitter, etc..).
Doesn't Angular CLI support having multiple projects in the same workspace?
Yes, starting with Angular CLI 6 you can add different types of projects to a single workspace (by default you can add applications and libraries). This is great, but is not sufficient to enable the monorepo-style development. Nx adds an extra layer of tooling to make this possible.
Analyzing and Visualizing the Dependency Graph
To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to build this dependency graph. Run nx dep-graph to see the dependency diagram of your workspace.
Rebuilding and Retesting What is Affected
To be productive in a monorepo, you need to be able to check that your change is safe, and rebuilding and retesting everything on every change won’t scale. Nx uses code analysis to determine what needs to be rebuilt and retested.
nx affected:build # reruns build for all the projects affected by a PR
nx affected:test # reruns unit tests for all the projects affected by a PR
Nx will topologically sort the projects, and will run what it can in parallel. Nx will also use its advanced distributed computation caching to drastically speed up your commands.
Full-Stack Development
With Nx, you can build a backend application next to your frontend application in the same repository. The backend and the frontend can share code. You can connect them to enable a fantastic development experience.
How do you do it?
First, generate an Angular application.
nx g @nrwl/angular:app frontend
Second, generate a Nest application.
nx g @nrwl/nest:app backend --frontend-project frontend # Generate a Nest Application and sets up a proxy for the frontend application.
Use Innovative Tools
Tools like Cypress, Jest, Prettier, and Nest have gained a lot of popularity.
Adding these tools to the dev workflow is challenging in a regular Angular CLI project. The choice you have is not between Protractor or Cypress, but between a hacked-up setup for Cypress and a great CLI setup for Protractor. Nx changes that!
When using Nx, adding Cypress or Jest is easy:
nx g @nrwl/angular:app myapp --e2e-test-runner=cypress --unit-test-runner=jest # cypress and jest are actually defaults
nx g @nrwl/angular:app myapp --e2e-test-runner=protractor --unit-test-runner=karma
Tests can then be run just like you would run them normally:
nx test myapp
nx e2e myapp