Angular Mono Repo Starter
An Angular mono repository starter kit featuring Jest, Lerna, Compodoc, scss-bundle and ng-packagr.
Features
- Flatten SCSS output into a single file to improve build time for consumers
- Supports scoped packages
- Supports secondary entries similar to Angular's Testing Modules.
- All the other features that
Jest,Lerna,Compodocandng-packagrprovide.
The Stack
- Lerna - A tool for managing JavaScript projects with multiple packages. One of the major advantage of Lerna is semantic releases and package version syncing.
- Jest - Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated "zero-configuration" experience.
- ng-packagr - Transpile and Bundle libraries to Angular Package Format.
- Compodoc - Compodoc is a documentation tool for Angular applications & libraries. It generates awesome static documentation.
- scss-bundle - Bundles all SCSS imports into a single file
Get Started
To get started, you need to:
- Clone the repository
git clone https://github.com/alan-agius4/ng-mono-repo-starter.git <project_name>- Install dependencies
cd <project_name>
npm install
Note: There is a postinstall script that after npm install has finished will bootstrap the mono repo.
Setting your project scope
It is recommanded that you use scoped npm packages. This is set to @speedy by default. To change it you need to modify a couple of files.
These are:
tsconfig.jsontsconfig.build.jsonlerna.jsonjest.config.js
NPM Tasks
| Task | Description |
|---|---|
| aio | Generates a static documentation of your libraries |
| bootstrap | Install packages dependencies and bootstrap the mono repo |
| build | Build all the packages inside the mono repo |
| watch | Build all the packages inside the mono repo and perform an incremental build when a file changes (NB: in case you have cross dependencies it's recommanded that you first perform a build) |
| build-tools | Build the tools script that are used for building the mono repo |
| clean | Clean up packages node_modules and dist folders |
| test | Run unit and integration tests |
| test-debug | Run unit and integration tests in debug mode |
| test-tdd | Run unit and integration tests in watch mode |
| release | Runs lerna publish |
Testing
For this project, I chose Jest as our test framework. While Karma is probably more common for Angular testing, Karma is slower and doesn't offer some important features that Jest does.
Using the debugger in VS Code
Debugging is one of the places where VS Code really shines over other editors. This project comes pre-configured launch.json. All you need to do is hit F5 in VS Code and get debugging!