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

Question

我想从Angular的AOT编译器编译中排除一些代码。例如，webpack-strip-block loader 可用于删除生产中注释之间的代码。

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

更具体地说，我正在尝试从编译中排除整个 NgModule(例如 TestModule(。执行此操作的一种方法是删除 app-routing.module 中创建路由的行。例如：

// 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' }
]
}

注意：这不是关于 webpack-strip-block 插件的具体问题。我只是以插件为例，因为它清楚地表明了我的意图。该插件的作者已经表示，他不希望该插件与AngularCompilerPlugin一起使用。该插件确实适用于我的 CSS 文件，但这无关紧要。

以下是我尝试过的其他一些事情：

1. 使用 Webpack 排除(或包含(。不。排除文件夹会引发编译器错误，因为应用程序代码仍依赖于 TestModule。

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

2. 使用NODE_ENV有条件地加载路由。不。编译器错误很多，因为 if 语句(显然(不允许在对象数组中使用。

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

3. 使用 Webpack 外部。我已经尝试过了，但它似乎不适合这个用例。

这是我的依赖项列表：

Angular 6.1.7
TypeScript 2.9.2
Webpack 4.19.1

Answer 1

在 Webpack 4 中，您可以使用NODE_ENV有条件地在 app-routing.module 中添加路由：

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

这可以防止 TestModule 在生产中编译。感谢 Pavel Agarkov 建议将路由对象推送到数组上。

Answer 2

您可以使用DefinePlugin创建var NODE_ENV的全局替换(例如(：

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

然后你可以像这样使用这个变量：

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

Webpack 将用实际值替换NODE_ENV。在生产中，它将'production'因此if ('production' !== 'production')中的代码将无法访问，AOT 将删除它。