Usage With Angular
February 23, 2022 ยท View on GitHub
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.
For this purpose the ng-custom-transformers package was created which simplifies the usage.
Because this solution is not "native" there can be some problems with some Angular's utilities, eg. packgr.
- Install packages,
npm i tst-reflect && npm i tst-reflect-transformer -D
- add transformer to
tsconfig.json,
{
"compilerOptions": {
// your options...
// ADD THIS!
"plugins": [
{
"transform": "tst-reflect-transformer"
}
]
}
}
A. @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);
};
- modify
angular.json,
{
"architect": {
// ...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
// use @angular-builders/custom-webpack builder
"options": {
"customWebpackConfig": {
"path": "./mod.webpack.config.js"
}
// ...
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
// use @angular-builders/custom-webpack builder
// ...
},
}
}
ng buildorng servedone.
B. ngx-build-plus
ng add ngx-build-plusng build --plugin ng-custom-transformersorng serve --plugin ng-custom-transformers
ngx-build-plusoverridesangular.jsonautomatically.
Demo
Demo project on StackBlitz here.