My application built with Ionic heavily relies on conditional compilation, where I need to include or exclude code blocks based on specific config values, similar to the functionality of m4.
Previously, I successfully utilized https://github.com/nippur72/ifdef-loader for this purpose.
Now, I am faced with the task of updating this app from Angular 10 to 13 (and Ionic 5 to 6).
While ifdef-loader worked with Angular 10 after applying a patch (https://gist.github.com/tristanidoux/892469f2c345bd6c6551eb19c705a016) to @angular-dev-kit, the same patch does not seem to work with Angular 13 due to significant file changes.
Therefore, I have been exploring the use of "@angular-builders/custom-webpack": "^13.0.0" following a guide from https://medium.com/angular-in-depth/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc.
I have created a custom.webpack.config.js file based on the documentation from ifdef-loader:
// ifdef-loader config
const opts = {
APP: false,
WEB: true,
DEBUG: true,
version: 3,
"ifdef-verbose": true,
"ifdef-triple-slash": true,
"ifdef-fill-with-blanks": true,
"ifdef-uncomment-prefix": "// #code "
};
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{ loader: 'ts-loader' },
{ loader: 'ifdef-loader', options: opts }
]
}
]
},
Unfortunately, it seems that ifdef-loader is not being invoked with this setup.
Therefore, I have three questions:
Am I missing something obvious in my configuration?
Has anyone successfully used ifdef-loader with Angular 13? If so, how?
Alternatively, is there another solution for conditionally including/excluding code blocks in an Angular 13 project?
Any advice or suggestions would be highly appreciated.