Webpack & Angular 7

[tristanidoux]

Hello, first I wanted to thank you for this great module by the way, very useful :)

As I'm kind of a noob regarding webpack (I usually use ng-cli), I was wondering if it would be possible to have an example to make it work with Angular 7 ?

I installed the @angular-builders/custom-webpack package and can successfully have a custom webpack config. With the verbose activated, I can see the ifdef being detected but unfortunately the built app still contains the conditional blocks.

Here is my webpack config and my app :

custom-webpack-config.js:

var path = require('path');
var env = require("./src/environments/environment.json");


const opts = {
  env,
  DEBUG: true,
  "ifdef-verbose": true,       // add this for verbose output
};

console.log('Custom webpack config loaded');

module.exports = {
  entry: {
      main: './src/main.ts'
  },
  output: {
      path: path.resolve(__dirname, '../app/templates')
  },
  plugins: [],
  module: {
    rules: [{
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        { loader: 'ts-loader' },
        { loader: 'ifdef-loader', options: opts }
      ],
    }]
  }
};

src/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

/// #if DEBUG
console.log('Debug activated!');
/// #endif

I'm wondering if the output is not being overwritten by another part of the webpack. Could someone help me please ?

Thanks for your time !

[gurpreet-hanjra]

Hello @tristanidoux Indeed it's a great module. You might need to set DEBUG: false, to omit in opts to exclude the conditional blocks.

For example, for development set DEBUG: true, so that it includes the conditional block, for production set DEBUG: false, to exclude the conditional block.

[skator68]

For me it is exactly like @tristanidoux. With the build process it doesn't matter whether DEBUG is true or false. ifdev-loader detect the DEBUG condition during compilation, but the built app still contains the conditional block. It appears that the Angular CLI build process ignores the ifdev-loader statement. Does anyone have any idea how to use ifdev-load with Angular 7 or later? Thanks a lot

[tristanidoux]

Sorry for the late reply but I finally have time to share the solution I used.

Webpack doesn't allow the use of preprocessor as it reads directly the files from the disk. A fix I've been using is to patch the webpack compiler to call ifdef-loader parser.

You can find the patch here.

@nippur72, you should probably put a note in the README regarding this limitation. Feel free to use the patch I've linked in your documentation if you want :smiley:.

[ubergeoff]

Same here: it doesn't matter whether DEBUG is true or false.

Why would this not for for Angular..? @angular-builders/custom-webpack

[tristanidoux]

@ubergeoff Look at my previous response for explanation & solution (using patch).

[Yermo]

@tristanidoux With the release of Angular 13 the patch no longer works and it seems the whole file structure has changed. Any thoughts on how to get ifdef-loader working with the latest Angular? see #62

[Yermo]

FWIW, I have created a patch for @angular-devkit/build-angular/@ngtools/webpack that seems to work:

https://gist.github.com/Yermo/22143234bce8e9ab7a4711f7069f5178