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",
    });

index.ts

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