Question

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

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插件的特定问题。我只是以该插件为例，因为它可以使我的意图明确。插件的作者有already stated，他不希望插件与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 Externals。，但这似乎不适用于此用例。

这是我的依赖项列表：

角度6.1.7
TypeScript 2.9.2
Webpack 4.19.1

Answer 1

您可以使用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会将其删除。

Answer 2

在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提出的将路线对象推入阵列的建议。

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

2 个答案: