Angular Monorepo Patterns with Nx — Part1

In this section we gonna discuss why you need to migrate to monorepo , how to migrate and what is the popular errors will you occur, so let us developpe like google and facebook companies.

Monorepo ?

Monorepo it’s simply a respository contien all your projects, in most cases every project of this project has his own business layer ( sometimes we can find projects sharing the same business layer ). Huge enterprises such as Google Facebook, Uber, Twitter, and so on use monorepos to manage all of their applications.

Why Monorepo?

In large organizations and businesses typically they have multiple applications ( microservice & micro frontends ), and all of them have a team of developers and their repository where the code resides. In such projects, it’s really difficult to share common code between multiple applications and manage their dependencies.

Monorepo comes to solve this problem, with Monorepo you benefit of :

• Increase Visibility
• Finds bugs that touch multiple modules easier.
• Reuse Code Directly.
• Easy to coordinate changes across modules.
• Ensure a Consistent Version of Dependencies.

In our course, we will use Nx, developed by the experts at Nrwl.

Why Nx?

With Nx, you can develop multiple full-stack applications holistically and share code between them all in the same workspace. Nx provides advanced tools which help you scale your enterprise development. Nx also helps enforce your organization’s standards and community best practices.

Nx also provides good support for Nx, along with helpers for Data Persistence. It also gives you the option to use Jest for testing and Cypress for end-to-end (e2e) testing.

Nx create a workspace (folder) that contains all project and some libraries shared between them. this folder consists of a single git repository. Applications can be of two types: web applications such as Angular or React (probably more in the future) and Node applications that use Nest.js or Express.

Create Nx workspace

To install Nx let’s run this following command :

npm install -g @angular/cli @nrwl/schematics

To generate a new workspace by the following command:

create-nx-workspace myworkspacename

now we create a new workspace with the following content:

• apps/: This is where all the apps and e2e folders reside
• libs/: This is where libraries are placed
• tools/: This is used for tooling e.g. workspace schematics
• angular.json: This is used by the Angular CLI to describe the projects (apps and libs), how to build and test them, etc.
• nx.json: This is used by Nx to provide metadata for projects e.g. tags
• tslint.json: This is the linter configuration file
• tsconfig.json: This is the workspace tsconfig. Nx adds path aliases for each lib here to allow for workspace-relative imports e.g.

Create new angular app

creating a new Nx app is done by using the Angular CLI but first, we must add the capability to create Angular applications via:

ng add @nrwl/angular — defaults

Now, create your first Angular application :

ng g @nrwl/angular: application AppName

This command executes a few actions:

1. It creates a new app, places it in the apps directory, and configures the angular.json and nx.json files to support the new app.
2. It configures the root NgModule to import the NxModule code so we can take advantage of things like DataPersistence.
3. It also provides an e2e sibling folder for this app that contains the e2e testing code.

Create new library

Adding new libs(in the next part we will explain all types of libs) to an Nx Workspace is done by using the Angular CLI generate command, just like adding a new app.

ng generate lib Lib-Name

This creates a new lib, places it in the libs directory, and configures the angular.json and nx.json files to support the new lib.

you can specify directory by add — directory=Dir :

ng generate lib Lib-Name — directory=shared

Running your app created is done by the following command:

ng serve AppName

Migrate from existing angular app to nx:

To migrate from the existing angular app to nx project we gonna use Angular Console extension of VsCode ( we can also create a new nx workspace with this extension ).

the first thing we need to be sure that the following files do not contain any errors :

• tsconfig.app.json

• tsconfig.json

• tslint.json

• package.json

• angular.json

• Karma,conf.js

• e2e/tsconfig.j

after verification now let s start converting our project, open Angular Console, choose Add and select Nrwl/schematic

After nx finish his conversion your project should look like this :

Note that NX.dev tool uses Angular 8 for the frontend and Typescript for the backend ,if your projects running on Angular 6, others on Angular 7.. . take care of :

• Routing definitions, no longer using loadChildren: ‘./page/page.module#PageModule’ by string but using dynamic imports.
• The extra parameter { static: true|false } on each @ContentChild and @ViewChild . Your mileage may vary, but static: false usually works for most cases.
• Any broken dependencies.

in the next part, we will talk about the types of libs how to generated and managed, also we will start creating a real Nx project, see you in the next part.