Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lekhmanrus/ngx-pug-builders
Angular Pug Builders
https://github.com/lekhmanrus/ngx-pug-builders
angular angular-cli angular-schematics builder builders hacktoberfest jade ng ng-add ngx pug pug-loader schematics template
Last synced: 1 day ago
JSON representation
Angular Pug Builders
- Host: GitHub
- URL: https://github.com/lekhmanrus/ngx-pug-builders
- Owner: lekhmanrus
- License: mit
- Created: 2021-12-06T17:41:12.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T19:53:59.000Z (10 months ago)
- Last Synced: 2024-09-19T00:14:34.587Z (7 days ago)
- Topics: angular, angular-cli, angular-schematics, builder, builders, hacktoberfest, jade, ng, ng-add, ngx, pug, pug-loader, schematics, template
- Language: TypeScript
- Homepage:
- Size: 2.41 MB
- Stars: 24
- Watchers: 5
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Pug Builders
[](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/build.yml)
[](https://github.com/lekhmanrus/ngx-pug-builders/actions/workflows/npm-publish.yml)
[](https://www.npmjs.com/package/ngx-pug-builders)
[](https://www.npmjs.com/package/ngx-pug-builders)
Angular Pug Builders adds [pug](https://pugjs.org/) (`.pug` / `.jade` files) support for your Angular project.
It 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.
## Installation
Installation is simple as:
1. At the root of your project, run:
```sh
ng add ngx-pug-builders
```
**Note:** If you use older version of Angular, you need to install appropriate version of Angular Pug Builders. See [Versioning](#versioning).
**Example:** For Angular `v12.x.x` use
```sh
ng add ngx-pug-builders@12
```
2. That's it!
### Manual installation
If you prefer manual installation, you would need:
1. Make sure your project have installed:
* `@angular-devkit/build-angular`
* `@angular/compiler-cli`
* `typescript`
2. Install `ngx-pug-builders` and `pug` as a development dependencies:
```sh
npm install --save-dev ngx-pug-builders pug
```
or
```sh
npm i -D ngx-pug-builders pug
```
3. Switch `@angular-devkit/build-angular` builders to appropriate `ngx-pug-builders` builders in your `angular.json`.
Before:
```json
"builder": "@angular-devkit/build-angular:[browser|dev-server|extract-i18n|karma|server]"
```
After:
```json
"builder": "ngx-pug-builders:[browser|dev-server|extract-i18n|karma|server]"
```
## Usage
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.pug', // <--- Pug file supported now
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
}
```
### Options
You can configure your project to pass the additional options to Pug loader.
You can see the [supported options here](https://github.com/Spence-S/simple-pug-loader#options).
### Configuration File Formats
Angular Pug Builders supports configuration files in several formats:
* **JavaScript** - use `.pugrc.js` or `pug.config.js` and export an object containing your configuration.
* **YAML** - use `.pugrc`, .`pugrc.yaml` or `.pugrc.yml` to define the configuration structure.
* **JSON** - use `.pugrc.json` to define the configuration structure.
* **package.json** - create an `pugConfig` property in your `package.json` file and define your configuration there.
If there are multiple configuration files in the same directory, Angular Pug Builders will only use one. The priority order is as follows:
1. `package.json`
2. `.pugrc`
3. `.pugrc.json`
4. `.pugrc.yaml`
5. `.pugrc.yml`
6. `.pugrc.js`
7. `.pugrc.cjs`
8. `pug.config.js`
9. `pug.config.cjs`
### Using Configuration Files
Here'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)):
* `.pugrc.json` (JSON)
```json
{
"basedir": "./src/"
}
```
* `.pugrc` (YAML)
```yaml
# Unlike pug-loader, simple-pug-loader uses pug for all file resolution.
basedir: ./src/
```
* `pug.config.js` (JavaScript)
```js
module.exports = {
// Unlike pug-loader, simple-pug-loader uses pug for all file resolution.
basedir: './src/'
};
```
**P.S.**: Either of that should work. No need to create all of them. [See Configuration File Formats](#configuration-file-formats).
## Builders Support
| Status | Name | Description |
| ------ | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ❌ | application | Build an Angular application targeting a browser and server environment using [esbuild](https://esbuild.github.io). |
| ❌ | app-shell | Build an Angular [App shell](https://angular.io/guide/app-shell). |
| ✔ | browser | Build an Angular application targeting a browser environment using [Webpack](https://webpack.js.org). |
| ❌ | browser-esbuild | Build an Angular application targeting a browser environment using [esbuild](https://esbuild.github.io). |
| ✔ | dev-server | A development server that provides live reloading. |
| ✔ | extract-i18n | Extract i18n messages from an Angular application. |
| ✔ | karma | Execute unit tests using [Karma](https://github.com/karma-runner/karma) test runner. |
| ❌ | 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). |
| ❌ | 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. |
| ✔ | server | Build an Angular application targeting a [Node.js](https://nodejs.org) environment. |
| ❌ | ssr-dev-server | A development server which offers live reload during development, but uses server-side rendering. |
| ❌ | protractor | **Deprecated** - Run end-to-end tests using [Protractor](https://www.protractortest.org/) framework. |
## Dependencies
* [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular)
* [@angular/compiler-cli](https://github.com/angular/angular/tree/master/packages/compiler-cli)
* [pug](https://github.com/pugjs/pug)
* [typescript](https://github.com/microsoft/TypeScript)
## Versioning
Versions started from **v12** and are consistant with major Angular version used in your project. E.g.:
Use `v17.x.x` with Angular `17.x.x`.
Use `v16.x.x` with Angular `16.x.x`.
Use `v15.x.x` with Angular `15.x.x`.
Use `v14.x.x` with Angular `14.x.x`.
Use `v13.x.x` with Angular `13.x.x`.
Use `v12.x.x` with Angular `12.x.x`.
## Build
Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.