MonoRepo Development Style via Angular.
source: https://angular.io/guide/file-structure
The "ng new" angular cli command creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests. The skeleton is for a simple Welcome application that is ready to run and easy to modify. The root-level application has the same name as the workspace, and the source files reside in the src/
subfolder of the workspace.
This default behavior is suitable for a typical "multi-repo" development style where each application resides in its own workspace. Beginners and intermediate users are encouraged to use "ng new" to create a separate workspace for each application.
Angular also supports workspaces with multiple projects. This type of development environment is suitable for advanced users who are developing shareable libraries, and for enterprises that use a "monorepo" development style, with a single repository and global configuration for all Angular projects.
To set up a monorepo workspace, you should skip the creating the root application. See Setting up for a multi-project workspace :
Multiple projects:
A multi-project workspace is suitable for an enterprise that uses a single repository and global configuration for all Angular projects (the "monorepo" model). A multi-project workspace also supports library development.
Setting up for a multi-project workspace:
If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name. The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.
ng new my-workspace --no-create-application
You can then generate applications and libraries with names that are unique within the workspace.
cd my-workspace
ng generate application my-first-app
Multiple project file structure
The first explicitly generated application goes into the projects folder along with all other projects in the workspace. Newly generated libraries are also added under projects. When you create projects this way, the file structure of the workspace is entirely consistent with the structure of the workspace configuration file, angular.json.
my-workspace
… (workspace-wide config files)
projects (generated applications and libraries)
my-first-app --(an explicitly generated application)
… --(application-specific config)
src --(source and support files for application)
my-lib --(a generated library)
… --(library-specific config)
src --(source and support files for library)
Library project files
When you generate a library using the CLI (with a command such as ng generate library my-lib), the generated files go into the projects/ folder of the workspace. For more information about creating your own libraries, see Creating Libraries.
Libraries unlike applications have their own package.json configuration file.
Under the projects/ folder, the my-lib folder contains your library code.
LIBRARY SOURCE FILES | PURPOSE |
src/lib | Contains your library project's logic and data. Like an application project, a library project can contain components, services, modules, directives, and pipes. |
src/public-api.ts | Specifies all files that are exported from your library. |
ng-package.json | Configuration file used by ng-packagr for building your library. |
package.json | Configures npm package dependencies that are required for this library. |
tsconfig.lib.json | Library-specific TypeScript configuration, including TypeScript and Angular template compiler options. See TypeScript Configuration. |
tsconfig.lib.prod.json | Library-specific TypeScript configuration that is used when building the library in production mode. |
tsconfig.spec.json | TypeScript configuration for the library tests. See TypeScript Configuration. |
Thank you,
Happy Coding😊.
You can follow me for more such blogs: https://www.linkedin.com/in/shivraj-singh-deopa-4b5879111/