{"id":2322,"date":"2019-06-30T13:23:29","date_gmt":"2019-06-30T11:23:29","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2322"},"modified":"2025-07-16T09:32:39","modified_gmt":"2025-07-16T07:32:39","slug":"sustainable-angular-architectures-2","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/sustainable-angular-architectures-2\/","title":{"rendered":"Implementing your Strategic Design with Angular and Nx"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 2 of 2 in the series “DDD with Angular and Nx”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Sustainable Angular Architectures with Strategic Design (DDD)<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Implementing your Strategic Design with Angular and Nx<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n
    \n

    In the first part of this series, I've presented the idea of Strategic Design which allows to subdivide a software system into several self-contained (sub-)domains. In this part, I show how to implement those domains with Angular and an Nx<\/a>-based monorepo.<\/p>\n

    For this, I'm following some recommendations the Nx team recently wrote down in their free e-book about Monorepo Patterns<\/a>. Before this was available, I've used similar strategies but in order to help establishing a common vocabulary and common conventions in the community, I seek to use this official way.<\/p>\n

    Implementation with Nx<\/h2>\n

    For the implementation of the defined architecture, a workspace based on Nx [Nx] is used. This is an extension for the Angular CLI, which among other things helps to break down a solution into different applications and libraries. Of course this is just one of several possible approaches. As an alternative, one could, for example, implement each domain as a completely separate solution. This would be called a micro-app approach.<\/p>\n

    The solution shown here puts all applications into one apps<\/code> folder, and all the reusable libraries are grouped by the respective domain name in the libs<\/code> folder:<\/p>\n

    \"Folder<\/p>\n

    Because such a workspace consists of several applications and libraries that are managed in a common source code repository, there is also talk of a monorepo. This pattern is used extensively by Google and Facebook, among others, and has been the standard case for the development of .NET solutions in the Microsoft world for about 20 years.<\/p>\n

    It allows the sharing of source code between the project participants in a particularly simple way and also prevents version conflicts by having only one central node_modules<\/code> folder with dependencies. This ensures that e.g. each library uses the same Angular version.<\/p>\n

    To install Nx you can use the following command:<\/p>\n

    npm install -g @nrwl\/schematics\n    <\/div><\/code><\/pre>\n
    In order to create the CLI-based monorepo workspace, just leverage the create-nx-workspace<\/code> command. Then, you can use ng generate<\/code> to add applications and libraries:<\/p>\n
    create-nx-workspace e-proc\ncd e-proc\nng generate app ui\nng generate lib feature-request-product\n    <\/div><\/code><\/pre>\n
    Categories for Libraries<\/h2>\n
    In their free e-book about Monorepo Patterns<\/a>, Nrwl<\/a> -- the company behind Nx -- use the following categories for libraries:<\/p>\n