Is there a way to exclude specific code from Angular's AOT compiler? For instance, the webpack-strip-block loader can be utilized to eliminate code between comments during production.
export class SomeComponent implements OnInit {
ngOnInit() {
/* develblock:start */
alert("Show in development only"); // Oops. This still appears in production.
/* develblock:end */
}
}
Specifically, I am looking for ways to exclude an entire NgModule (e.g. TestModule) from compilation. One possible approach could involve removing the line(s) in the app-routing.module that define 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' }
]
}
Please note that this is not a question exclusively about the webpack-strip-block plugin. It is being used here as an illustration to convey my intention. The plugin's creator has indicated that it may not work with the AngularCompilerPlugin. While the plugin does function with CSS files, that is not the main focus.
Various attempts have been made to achieve this:
1. Using Webpack exclude (or include). Excluding the folder leads to compiler errors as the application code relies on TestModule.
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack',
exclude: path.resolve(__dirname, 'src/app/test')
},
2. Using NODE_ENV for conditional loading of routes. Integrating if statements within an array of objects results in compiler errors.
const routes: Routes = [{
if (process.env.NODE_ENV !== 'production') {
path: 'test', loadChildren: './test/test.module#TestModule'
}
}];
3. Exploring Webpack Externals. Although attempted, it does not seem suitable for this scenario.
Dependencies:
Angular 6.1.7
TypeScript 2.9.2
Webpack 4.19.1