Angular Builders In Depth

Santosh Yadav

GDE for Angular and Web Technologies

Writer AngularInDepth, Mentor DotNetTricks

twitter.com/SantoshYadavDev

github.com/santoshyadav198613

https://www.linkedin.com/in/yadavsantosh/

santoshyadav.dev

History

  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  }

  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  }

Issues

Overriding Webpack Configuration.

Building and Publishing Angular Libraries.

Using Other Tools for Test like Jest or cypress.io.

Old Solution

ng eject

Solution

Builders API

 "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "bulma-app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "bulma-app:build:production"
    }
  }
}

 "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "bulma-app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "bulma-app:build:production"
    }
  }
}

 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/bulma-app",
    "index": "projects/bulma-app/src/index.html",
    "main": "projects/bulma-app/src/main.ts",
    "polyfills": "projects/bulma-app/src/polyfills.ts",
    "tsConfig": "projects/bulma-app/tsconfig.app.json",
    "aot": false,
    "assets": [
    ],
    "styles": [
    ],
    "scripts": [      
    ]
  },
  "configurations": {
    "production": {
    }
  }
}

 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/bulma-app",
    "index": "projects/bulma-app/src/index.html",
    "main": "projects/bulma-app/src/main.ts",
    "polyfills": "projects/bulma-app/src/polyfills.ts",
    "tsConfig": "projects/bulma-app/tsconfig.app.json",
    "aot": false,
    "assets": [
    ],
    "styles": [
    ],
    "scripts": [      
    ]
  },
  "configurations": {
    "production": {
    }
  }
}

 "build": {
  "builder": "@angular-devkit/build-ng-packagr:build",
  "options": {
    "tsConfig": "projects/ngx-bulma/tsconfig.lib.json",
    "project": "projects/ngx-bulma/ng-package.json"
  }
}

 "build": {
  "builder": "@angular-devkit/build-ng-packagr:build",
  "options": {
    "tsConfig": "projects/ngx-bulma/tsconfig.lib.json",
    "project": "projects/ngx-bulma/ng-package.json"
  }
}

 "test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "projects/bulma-app/src/test.ts",
    "polyfills": "projects/bulma-app/src/polyfills.ts",
    "tsConfig": "projects/bulma-app/tsconfig.spec.json",
    "karmaConfig": "projects/bulma-app/karma.conf.js",
    "assets": [
      "projects/bulma-app/src/favicon.ico",
      "projects/bulma-app/src/assets"
    ],
    "styles": [
      "projects/bulma-app/src/styles.css"
    ],
    "scripts": [
    ]
  }
}

 "test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "projects/bulma-app/src/test.ts",
    "polyfills": "projects/bulma-app/src/polyfills.ts",
    "tsConfig": "projects/bulma-app/tsconfig.spec.json",
    "karmaConfig": "projects/bulma-app/karma.conf.js",
    "assets": [
      "projects/bulma-app/src/favicon.ico",
      "projects/bulma-app/src/assets"
    ],
    "styles": [
      "projects/bulma-app/src/styles.css"
    ],
    "scripts": [
    ]
  }
}

 "e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "projects/bulma-app/e2e/protractor.conf.js",
    "devServerTarget": "bulma-app:serve"
  },
  "configurations": {
    "production": {
      "devServerTarget": "bulma-app:serve:production"
    }
  }
}

 "e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "projects/bulma-app/e2e/protractor.conf.js",
    "devServerTarget": "bulma-app:serve"
  },
  "configurations": {
    "production": {
      "devServerTarget": "bulma-app:serve:production"
    }
  }
}

Custom Builders

 import { BuilderContext, BuilderOutput, createBuilder } from
    '@angular-devkit/architect';
import { json } from '@angular-devkit/core';
import { schema as BuilderOptions } from './schema';
 
export default createBuilder<json.JsonObject
    & BuilderOptions>(execute);
 
async function execute(options: BuilderOptions,
    context: BuilderContext)
    : Promise<BuilderOutput> {
    // custom logic to process
}

index.ts

 import { BuilderContext, BuilderOutput, createBuilder } from
    '@angular-devkit/architect';
import { json } from '@angular-devkit/core';
import { schema as BuilderOptions } from './schema';
 
export default createBuilder<json.JsonObject
    & BuilderOptions>(execute);
 
async function execute(options: BuilderOptions,
    context: BuilderContext)
    : Promise<BuilderOutput> {
    // custom logic to process
}

index.ts

     const build = await context.scheduleTarget({
      target: 'build',
      project: context.target?.project || '',
      configuration: 'production'
    });
 
    const schduleBuild = await context.scheduleBuilder('@angular-devkit/build-angular:browser', {
      main: 'src/main.ts',
      polyfills: "src/polyfills.ts",
    });     const build = await context.scheduleTarget({
      target: 'build',
      project: context.target?.project || '',
      configuration: 'production'
    });
 
    const schduleBuild = await context.scheduleBuilder('@angular-devkit/build-angular:browser', {
      main: 'src/main.ts',
      polyfills: "src/polyfills.ts",
    });

index.ts

 context.reportStatus('running');
      // "error",
      // "running",
      // "stopped",
      // "waiting"
 
context.reportRunning(); context.reportStatus('running');
      // "error",
      // "running",
      // "stopped",
      // "waiting"
 
context.reportRunning();

index.ts

 {
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "custom_builder_name": {
      "implementation": "./deploy",
      "schema": "./deploy/schema.json",
      "description": "Runs any command line in the operating system."
    }
  }
}

builders.json

 {
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "custom_builder_name": {
      "implementation": "./deploy",
      "schema": "./deploy/schema.json",
      "description": "Runs any command line in the operating system."
    }
  }
}

builders.json

 {
  "name": "@netlify-builder/deploy",
  "version": "2.0.3",
  "description": "A Netlify builder schematics for deployment",
  "main": "index.js",
  "builders": "./builders.json"
}

package.json

 {
  "name": "@netlify-builder/deploy",
  "version": "2.0.3",
  "description": "A Netlify builder schematics for deployment",
  "main": "index.js",
  "builders": "./builders.json"
}

package.json

Using Builder

 "custom_builder_name": {
  "builder": "package:custom_builder_name",
  "options": {
    // provide options
  }
}

ng run app_name:builder_name

Demo

@angular-builders/custom-webpack:browser

@angular-builders/custom-webpack:server

@angular-builders/custom-webpack:karma

ngx-build-plus

@angular/fire:deploy

@angular-builders/jest

@azure/ng-deploy

Builders By Community

ng deploy

twitter.com/SantoshYadavDev

github.com/santoshyadav198613

https://www.linkedin.com/in/yadavsantosh/

santoshyadav.dev

Thank you

	"e2e": {
	"protractor": {
	"config": "./protractor.conf.js"
	}
	},
	"lint": [
	{
	"project": "src/tsconfig.app.json"
	},
	{
	"project": "src/tsconfig.spec.json"
	},
	{
	"project": "e2e/tsconfig.e2e.json"
	}
	],
	"test": {
	"karma": {
	"config": "./karma.conf.js"
	}
	}

	"serve": {
	"builder": "@angular-devkit/build-angular:dev-server",
	"options": {
	"browserTarget": "bulma-app:build"
	},
	"configurations": {
	"production": {
	"browserTarget": "bulma-app:build:production"
	}
	}
	}

	"build": {
	"builder": "@angular-devkit/build-angular:browser",
	"options": {
	"outputPath": "dist/bulma-app",
	"index": "projects/bulma-app/src/index.html",
	"main": "projects/bulma-app/src/main.ts",
	"polyfills": "projects/bulma-app/src/polyfills.ts",
	"tsConfig": "projects/bulma-app/tsconfig.app.json",
	"aot": false,
	"assets": [
	],
	"styles": [
	],
	"scripts": [
	]
	},
	"configurations": {
	"production": {
	}
	}
	}

	"build": {
	"builder": "@angular-devkit/build-ng-packagr:build",
	"options": {
	"tsConfig": "projects/ngx-bulma/tsconfig.lib.json",
	"project": "projects/ngx-bulma/ng-package.json"
	}
	}

	import { BuilderContext, BuilderOutput, createBuilder } from
	'@angular-devkit/architect';
	import { json } from '@angular-devkit/core';
	import { schema as BuilderOptions } from './schema';

	export default createBuilder<json.JsonObject
	& BuilderOptions>(execute);

	async function execute(options: BuilderOptions,
	context: BuilderContext)
	: Promise<BuilderOutput> {
	// custom logic to process
	}

	const build = await context.scheduleTarget({
	target: 'build',
	project: context.target?.project \|\| '',
	configuration: 'production'
	});

	const schduleBuild = await context.scheduleBuilder('@angular-devkit/build-angular:browser', {
	main: 'src/main.ts',
	polyfills: "src/polyfills.ts",
	});

	context.reportStatus('running');
	// "error",
	// "running",
	// "stopped",
	// "waiting"

	context.reportRunning();

	{
	"$schema": "@angular-devkit/architect/src/builders-schema.json",
	"builders": {
	"custom_builder_name": {
	"implementation": "./deploy",
	"schema": "./deploy/schema.json",
	"description": "Runs any command line in the operating system."
	}
	}
	}

	{
	"name": "@netlify-builder/deploy",
	"version": "2.0.3",
	"description": "A Netlify builder schematics for deployment",
	"main": "index.js",
	"builders": "./builders.json"
	}

	"custom_builder_name": {
	"builder": "package:custom_builder_name",
	"options": {
	// provide options
	}
	}