Custom Webpack Builder

Extended @angular-devkit/build-angular:browser builder that allows to specify additional webpack configuration (on top of the existing under the hood) and index.html tranformations. The builder will run the same build as @angular-devkit/build-angular:browser does with extra parameters that are specified in the provided webpack configuration. It will also run transformation on index.html if specified.

Builders

@angular-builders/custom-webpack:browser
@angular-builders/custom-webpack:server
@angular-builders/custom-webpack:karma
@angular-builders/custom-webpack:dev-serve

Jest Builder

Allows running ng test with Jest instead of Karma & Jasmine.
The builder comes to provide zero configuration setup for Jest while keeping the workspace clear of boilerplate code.

Ngx Build Plus

Extend the Angular CLI's default build behavior without ejecting:

Extend the default behavior by providing a partial config that just contains your additional settings
Alternative: Extend the default behavior by providing a custom function
Optional: Build a single bundle (e. g. for Angular Elements)
Inherits from the default builder, hence you have the same options
Simple to use
No eject needed

ngx-gh(Deprecated)

Deploy your Angular app to GitHub pages directly from the Angular CLI!

angular-cli-ghpages

Deploy your Angular app to GitHub pages directly from the Angular CLI!

ng new your-angular-project --defaults
git remote add origin https://github.com//.git
ng add angular-cli-ghpages
ng deploy

ng-deploy-azure

Deploy Angular apps to Azure using the Angular CLI

@angular/fire:deploy

Deploy your application on Firebase Hosting

ng add @angular/fire to your project
ng run [ANGULAR_PROJECT_NAME]:deploy to deploy

Bazel Build

Bazel is an open-source build and test tool similar to Make, Maven, and Gradle. It uses a human-readable, high-level build language. Bazel supports projects in multiple languages and builds outputs for multiple platforms. Bazel supports large codebases across multiple repositories, and large numbers of users.

@nrwl/builders

This package is part of their Nx Modern tools.
You can add this package via npm i @nrwl/builders or yarn add -D @nrwl/builders.
Having Nx workspace is not compulsory as they seamlessly integrate with angular cli.

@zeit/ng-deploy

Deploy your application on ZEIT Now

yarn global add @angular/cli
ng add @zeit/ng-deploy
ng run hello-world:deploy

ng-builder-file-remover

Remove files and folders from your project. Useful for removing any assets you don't want in a production build.

@netlify-builder/deploy

Deploy your application on Netlify with Angular CLI

ng add @netlify-build/deploy
ng deploy

ng-builder-google-maps

Angular CLI builder that adds the Google Maps API into your Angular application.

ngx-aws-deploy

Deploy Angular apps to Amazon S3 using the Angular CLI

ng-process-env

Retrieve values from System Environment (OS) variables and update relevant environment.ts file.

Install: ng add ng-process-env or manually ng g ng-process-env:process-env
Collect vars: ng run my-app:collect-vars

ngx-electronify

Serve your Angular application in the desktop using Electron

@ngx-env/builder

Easily inject environment variables into your Angular applications

Add @ngx-env to your CLI project

ng add @ngx-env/builder
Define Environment Variables in .env

NG_APP_ENABLE_ANALYTICS=false NG_APP_VERSION=$npm_package_version NG_APP_COMMIT=$GITHUB_SHA
Use in TypeScript

@Component({ selector: "app-footer", }) export class FooterComponent { version = process.env.NG_APP_VERSION; branch = process.env.NG_APP_BRANCH_NAME; commit = process.env.NG_APP_COMMIT; analyticsFlag = process.env.NG_APP_ENABLE_ANALYTICS; }
Run CLI commands

npm start NG_APP_BRANCH_NAME=$GITHUB_HEAD_REF ng test NG_APP_BRANCH_NAME=`git branch --show-current` npm run build