Как предотвратить компиляцию блоков кода TypeScript с помощью подключаемого модуля Angular AOT Webpack

Question

Я хочу исключить код из компиляции AOT Angular.Например, загрузчик 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 .Я просто использую плагин в качестве примера, потому что он проясняет мои намерения.Автор плагина уже заявил , что он не ожидает, что плагин будет работать с 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 . Я пробовал его, но он не подходит для этого варианта использования.

Вот мой список зависимостей:

Angular 6.1.7
TypeScript 2.9.2
Webpack 4.19.1

Answer 1

В Webpack 4 вы можете условно добавить маршрут в app-routing.module, используя NODE_ENV:

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

Это предотвращает компиляцию TestModule в производстве.Спасибо Павлу Агаркову за предложение поместить объект маршрута в массив.

Answer 2

Вы можете использовать DefinePlugin для создания глобальной замены для переменной 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 удалит его.