ng-custom-transformers
Because Angular CLI does not support custom TypeScript transformers/plugins
(there is still an open feature request, more than 4 years), custom transformers must be configured manually by tampering with the Webpack
configuration file.
Compatibility
This package has one peer dependency which is "@ngtools/webpack": ">=12.0.0"
. Which is generally Angular 12 and higher.
Disclaimer
Since custom TypeScript transformers/plugins are not officially supported by the Angular CLI, this package rely on unexported private features. Currently, it works like a charm, without changing the
default behavior, but it may be broken by the future Angular updates so there can be no guarantee.
Usage
- Install this package.
npm i ng-custom-transformers -D
- Add your transformer into the
tsconfig.json
. Format is the same like one defined by ttypescript, but don't use ttypescript
, Angular has own pipeline for
transformers.
-
{
"compilerOptions": {
// ... your options ...
// ADD THIS SECTION!
"plugins": [
{
"transform": "tst-reflect-transformer"
},
// use transformer you want
]
}
}
Currently, only transform
property is supported, which is a transformer package name or path to a transformer. Other options defined by ttypescript
are not implemented
yet. Feel free to create PR!
- let function exported from this package modify Webpack config used by Angular. This can be done by ngx-build-plus
or by @angular-builders/custom-webpack, which are packages that allows you to modify Angular's Webpack config.
choose one and continue in corresponding section.
@angular-builders/custom-webpack
npm i @angular-builders/custom-webpack -D
- Create file
mod.webpack.config.js
.
-
const {AngularCustomTransformers} = require("ng-custom-transformers");
module.exports = (config, options, targetOptions) => {
return AngularCustomTransformers.modifyConfig(config);
};
or .ts
import { AngularCustomTransformers } from "ng-custom-transformers";
import {
CustomWebpackBrowserSchema,
TargetOptions
} from "@angular-builders/custom-webpack";
import * as webpack from "webpack";
export default function (
config: webpack.Configuration,
options: CustomWebpackBrowserSchema,
targetOptions: TargetOptions
)
{
return AngularCustomTransformers.modifyConfig(config);
}
- Modify
angular.json
.
-
{
"architect": {
// ...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
// use @angular-builders/custom-webpack builder
"options": {
"customWebpackConfig": {
"path": "./mod.webpack.config.js"
}
// ...
}
}
}
}
ng build
or ng serve
ngx-build-plus
ng add ngx-build-plus
ng build --plugin ng-custom-transformers
or ng serve --plugin ng-custom-transformers