{"id":14967690,"url":"https://github.com/lekhmanrus/ngx-pug-builders","last_synced_at":"2025-07-25T23:12:28.960Z","repository":{"id":49930727,"uuid":"435590694","full_name":"lekhmanrus/ngx-pug-builders","owner":"lekhmanrus","description":"Angular Pug Builders","archived":false,"fork":false,"pushed_at":"2023-11-21T19:53:59.000Z","size":2532,"stargazers_count":24,"open_issues_count":5,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-31T10:25:41.352Z","etag":null,"topics":["angular","angular-cli","angular-schematics","builder","builders","hacktoberfest","jade","ng","ng-add","ngx","pug","pug-loader","schematics","template"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lekhmanrus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-06T17:41:12.000Z","updated_at":"2024-04-06T09:52:28.000Z","dependencies_parsed_at":"2023-11-21T20:43:40.887Z","dependency_job_id":null,"html_url":"https://github.com/lekhmanrus/ngx-pug-builders","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-pug-builders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-pug-builders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-pug-builders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-pug-builders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lekhmanrus","download_url":"https://codeload.github.com/lekhmanrus/ngx-pug-builders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238207646,"owners_count":19434095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","angular-schematics","builder","builders","hacktoberfest","jade","ng","ng-add","ngx","pug","pug-loader","schematics","template"],"created_at":"2024-09-24T13:38:28.059Z","updated_at":"2025-02-10T23:31:36.267Z","avatar_url":"https://github.com/lekhmanrus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Pug Builders\r\n\r\n[![Build](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/build.yml/badge.svg)](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/build.yml)\r\n[![Publish](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/npm-publish.yml)\r\n[![npm version](https://img.shields.io/npm/v/ngx-pug-builders.svg)](https://www.npmjs.com/package/ngx-pug-builders)\r\n[![npm](https://img.shields.io/npm/dm/ngx-pug-builders.svg)](https://www.npmjs.com/package/ngx-pug-builders)\r\n\r\nAngular Pug Builders adds [pug](https://pugjs.org/) (`.pug` / `.jade` files) support for your Angular project.\r\n\r\nIt extends default [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular) builders with webpack pug rules. That means you always could you the latest (or a specific version) Angular native builders with Angular Pug Builders, because Angular Pug Builders uses `@angular-devkit/build-angular` builders as a dependency.\r\n\r\n\r\n\r\n## Installation\r\n\r\nInstallation is simple as:\r\n\r\n1. At the root of your project, run:\r\n\r\n    ```sh\r\n    ng add ngx-pug-builders\r\n    ```\r\n\r\n    **Note:** If you use older version of Angular, you need to install appropriate version of Angular Pug Builders. See [Versioning](#versioning).\r\n\r\n    **Example:** For Angular `v12.x.x` use\r\n\r\n      ```sh\r\n      ng add ngx-pug-builders@12\r\n      ```\r\n\r\n\r\n2. That's it!\r\n\r\n\r\n\r\n### Manual installation\r\n\r\nIf you prefer manual installation, you would need:\r\n\r\n1. Make sure your project have installed:\r\n\r\n    * `@angular-devkit/build-angular`\r\n    * `@angular/compiler-cli`\r\n    * `typescript`\r\n\r\n\r\n2. Install `ngx-pug-builders` and `pug` as a development dependencies:\r\n\r\n    ```sh\r\n    npm install --save-dev ngx-pug-builders pug\r\n    ```\r\n\r\n    or\r\n\r\n    ```sh\r\n    npm i -D ngx-pug-builders pug\r\n    ```\r\n\r\n\r\n3. Switch `@angular-devkit/build-angular` builders to appropriate `ngx-pug-builders` builders in your `angular.json`.\r\n\r\n    Before:\r\n    ```json\r\n      \"builder\": \"@angular-devkit/build-angular:[browser|dev-server|extract-i18n|karma|server]\"\r\n    ```\r\n\r\n    After:\r\n    ```json\r\n      \"builder\": \"ngx-pug-builders:[browser|dev-server|extract-i18n|karma|server]\"\r\n    ```\r\n\r\n\r\n\r\n## Usage\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.pug', // \u003c--- Pug file supported now\r\n  styleUrls: ['./app.component.scss']\r\n})\r\nexport class AppComponent {\r\n  title = 'app';\r\n}\r\n\r\n```\r\n\r\n\r\n### Options\r\n\r\nYou can configure your project to pass the additional options to Pug loader.\r\n\r\nYou can see the [supported options here](https://github.com/Spence-S/simple-pug-loader#options).\r\n\r\n### Configuration File Formats\r\nAngular Pug Builders supports configuration files in several formats:\r\n\r\n* **JavaScript** - use `.pugrc.js` or `pug.config.js` and export an object containing your configuration.\r\n* **YAML** - use `.pugrc`, .`pugrc.yaml` or `.pugrc.yml` to define the configuration structure.\r\n* **JSON** - use `.pugrc.json` to define the configuration structure.\r\n* **package.json** - create an `pugConfig` property in your `package.json` file and define your configuration there.\r\n\r\nIf there are multiple configuration files in the same directory, Angular Pug Builders will only use one. The priority order is as follows:\r\n\r\n1. `package.json`\r\n2. `.pugrc`\r\n3. `.pugrc.json`\r\n4. `.pugrc.yaml`\r\n5. `.pugrc.yml`\r\n6. `.pugrc.js`\r\n7. `.pugrc.cjs`\r\n8. `pug.config.js`\r\n9. `pug.config.cjs`\r\n\r\n### Using Configuration Files\r\n\r\nHere's an example configuration file that sets Pug loader `basedir` option (again, [see whole list of supported options here](https://github.com/Spence-S/simple-pug-loader#options)):\r\n* `.pugrc.json` (JSON)\r\n  ```json\r\n  {\r\n    \"basedir\": \"./src/\"\r\n  }\r\n  ```\r\n\r\n* `.pugrc` (YAML)\r\n  ```yaml\r\n  # Unlike pug-loader, simple-pug-loader uses pug for all file resolution.\r\n  basedir: ./src/\r\n  ```\r\n\r\n* `pug.config.js` (JavaScript)\r\n  ```js\r\n  module.exports = {\r\n    // Unlike pug-loader, simple-pug-loader uses pug for all file resolution.\r\n    basedir: './src/'\r\n  };\r\n  ```\r\n\r\n**P.S.**: Either of that should work. No need to create all of them. [See Configuration File Formats](#configuration-file-formats).\r\n\r\n\r\n## Builders Support\r\n\r\n| Status | Name            | Description                                                                                                                                                                                  |\r\n| ------ | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n|    ❌   | application     | Build an Angular application targeting a browser and server environment using [esbuild](https://esbuild.github.io).                                                                          |\r\n|    ❌   | app-shell       | Build an Angular [App shell](https://angular.io/guide/app-shell).                                                                                                                            |\r\n|    ✔    | browser         | Build an Angular application targeting a browser environment using [Webpack](https://webpack.js.org).                                                                                        |\r\n|    ❌   | browser-esbuild | Build an Angular application targeting a browser environment using [esbuild](https://esbuild.github.io).                                                                                     |\r\n|    ✔    | dev-server      | A development server that provides live reloading.                                                                                                                                           |\r\n|    ✔    | extract-i18n    | Extract i18n messages from an Angular application.                                                                                                                                           |\r\n|    ✔    | karma           | Execute unit tests using [Karma](https://github.com/karma-runner/karma) test runner.                                                                                                         |\r\n|    ❌   | ng-packagr      | Build and package an Angular library in [Angular Package Format (APF)](https://angular.io/guide/angular-package-format) format using [ng-packagr](https://github.com/ng-packagr/ng-packagr). |\r\n|    ❌   | prerender       | [Prerender](https://angular.io/guide/prerendering) pages of your application. Prerendering is the process where a dynamic page is processed at build time generating static HTML.            |\r\n|    ✔    | server          | Build an Angular application targeting a [Node.js](https://nodejs.org) environment.                                                                                                          |\r\n|    ❌   | ssr-dev-server  | A development server which offers live reload during development, but uses server-side rendering.                                                                                            |\r\n|    ❌   | protractor      | **Deprecated** - Run end-to-end tests using [Protractor](https://www.protractortest.org/) framework.                                                                                         |\r\n\r\n\r\n\r\n## Dependencies\r\n\r\n* [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular)\r\n* [@angular/compiler-cli](https://github.com/angular/angular/tree/master/packages/compiler-cli)\r\n* [pug](https://github.com/pugjs/pug)\r\n* [typescript](https://github.com/microsoft/TypeScript)\r\n\r\n\r\n\r\n## Versioning\r\n\r\nVersions started from **v12** and are consistant with major Angular version used in your project. E.g.:\r\n\r\nUse `v17.x.x` with Angular `17.x.x`.\r\n\r\nUse `v16.x.x` with Angular `16.x.x`.\r\n\r\nUse `v15.x.x` with Angular `15.x.x`.\r\n\r\nUse `v14.x.x` with Angular `14.x.x`.\r\n\r\nUse `v13.x.x` with Angular `13.x.x`.\r\n\r\nUse `v12.x.x` with Angular `12.x.x`.\r\n\r\n\r\n## Build\r\n\r\nRun `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekhmanrus%2Fngx-pug-builders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekhmanrus%2Fngx-pug-builders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekhmanrus%2Fngx-pug-builders/lists"}