ng-custom-transformers v1.0.2
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 usettypescript
, 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) => {
// Your transformations of "config" ....
// And the important part here: modifyConfig()
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
)
{
// Your transformations of "config"...
// And the important part here: modifyConfig()
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
orng serve
ngx-build-plus
ng add ngx-build-plus
ng build --plugin ng-custom-transformers
orng serve --plugin ng-custom-transformers