如何防止Angular AOT Webpack插件编译TypeScript代码块

Question

I want to exclude some code from being compiled by Angular's AOT compiler. For example, the webpack-strip-block loader can be used to remove code between comments in production.

export class SomeComponent implements OnInit {
  ngOnInit() {
    /* develblock:start */
    alert("Show in development only"); // Oops. This still appears in production.
    /* develblock:end */
  }
}

More specifically, I'm trying to exclude an entire NgModule (eg TestModule) from being compiled. One way to do this would be to remove the line(s) in the app-routing.module that create the route. For example:

// app-routing.module
const routes: Routes = [
 {
    /* develblock:start */
    path: 'test', loadChildren: './test/test.module#TestModule'
    /* develblock:end */
 }
]

// webpack.config.js 
{
    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
    use: [
      { loader: '@ngtools/webpack' },
      { loader: 'webpack-strip-block' }
    ]
}

Note: This isn't a specific question about the webpack-strip-block plugin. I'm just using the plugin as an example because it makes my intent clear. The plugin's author has already stated that he doesn't expect the plugin to work with the AngularCompilerPlugin. The plugin does work with my CSS files, but that's beside the point.

Here are some other things that I've tried:

1. Using Webpack exclude (or include). Nope. Excluding the folder throws compiler errors because the application code still depends on TestModule.

{
  test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
  loader: '@ngtools/webpack',
  exclude: path.resolve(__dirname, 'src/app/test')
},

2. Using NODE_ENV to conditionally load the route. Nope. Compiler errors galore because an if statement is (obviously) not allowed inside an array of objects.

const routes: Routes = [{
  if (process.env.NODE_ENV !== 'production') {
    path: 'test', loadChildren: './test/test.module#TestModule'
  }
}];

3. Using Webpack Externals . I've tried it, but it doesn't seem appropriate for this use case.

Here's my dependency list:

Angular 6.1.7
TypeScript 2.9.2
Webpack 4.19.1

Answer 1

You can use DefinePlugin to create a global replacement for var NODE_ENV (for example):

// inside webpack.config
plugins: [
    new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    })
]

Then you can use this var like this:

declare const NODE_ENV: string;

if (NODE_ENV !== 'production') {
    routes.push({ path: 'test', loadChildren: './test/test.module#TestModule' });
}

Webpack will replace NODE_ENV with the actual value. In production it will be 'production' so the code inside the if ('production' !== 'production') will be unreachable and AOT will remove it.

Answer 2

In Webpack 4 you can conditionally add a route in app-routing.module using NODE_ENV:

if (process.env.NODE_ENV === 'development') {
  routes.push({ path: 'test', loadChildren: './test/test.module#TestModule' });
}

This prevents TestModule from being compiled in production. Thanks to Pavel Agarkov for the suggestion to push the route object onto the array.