Как заменить угловой модуль во время сборки на AOT? - PullRequest
Новая
       42

Как заменить угловой модуль во время сборки на AOT?

0 голосов
/ 12 октября 2019

Мне нужно иметь возможность заменить довольно большой модуль в моем приложении Angular на очень простой, чтобы нагрузка на мою сборку рендеринга на стороне сервера (исключая все ненужные требования для компонента, который слишком богат для работы на сервере)так или иначе). Без замены код пытается загрузить window или document. Некоторые библиотеки мне удалось просто заменить на null-loader, но в этом случае мне нужно обрезать все дерево зависимостей, обрезав этот конкретный модуль Angular.

Несмотря на все мои попытки переопределить оригинальный модуль, Angular (@ngtools/webpack) все же каким-то образом удается генерировать require вызовы для компонентов, которые я надеялся обрезать ...

Я пытался:

  • Использование параметра hostReplacementPaths для плагина компилятора 
new AngularCompilerPlugin({
    tsConfigPath: 'tsconfig.ssr.json',
    entryModule: path.join(__dirname, 'src/js/landing/landing.server.module.ts#LandingServerModule'),
    hostReplacementPaths: {
      [path.resolve('./src/js/app/help.module.ts')]: path.resolve('./src/js/landing/server-mock.module.ts')
    }
  })
  • Использование NormalModuleReplacementPlugin
new NormalModuleReplacementPlugin(
      /help\.module\./,
      resource => {
        resource.requestresource.request.replace('app/help.module.ts', 'landing/server-mock.module.ts')
      },
    ),
  • file-replace-loader
{
        test: /help\.module\.ts/,
        loader: 'file-replace-loader',
        options: {
          condition: 'if-replacement-exists',
          replacement: path.resolve('./src/js/landing/server-mock.module.ts'),
          async: true,
        }
      },

Я подозреваю, что угловой компилятор сканирует файлы на наличие зависимостей вне веб-пакета ...

Любые идеи, как я могу переопределить один Angularмодуль с фиктивным модулем во время сборки?

1 Ответ

0 голосов
/ 13 октября 2019

Я нашел решение. Мне пришлось создать промежуточный модуль src/js/app/mock-intermediate-version-of-the-module.ts, который реэкспортирует нужный мне модуль для обрезки 

import { NgModule } from '@angular/core';
import { ModuleThatYouNeedToReplaceAtBuildTime } from '../app/module-to-replace-at-build-time';

@NgModule({
  exports: [
    ModuleThatYouNeedToReplaceAtBuildTime,
  ],
})
export class IntermediateVersionOfTheModule {
}

, а также создать фиктивную версию IntermediateVersionOfTheModule:

src/js/app/mock-intermediate-version-of-the-module.ts

import { NgModule } from '@angular/core';

@NgModule({
})
export class LandingHelpModule {
}

А затем в конфигурации AngularCompilerPlugin передайте следующее: 

new AotPlugin({
  tsConfigPath: 'tsconfig.ssr.json',
  entryModule: path.join(__dirname, 'src/js/landing/landing.server.module.ts#LandingServerModule'),
  hostReplacementPaths: {
    [path.resolve('intermediate-version-of-the-module.ts')]: path.resolve('./mock-intermediate-version-of-the-module.ts')
  }
})

Хитрость заключается в замене только промежуточного модуля, который реэкспортирует фактический модуль, который мыхочу обрезать. Угловые компиляторы сканируют все наше дерево модулей и не могут работать с какими-либо компонентами без модулей и дублированных модулей с одинаковыми компонентами.

Надеюсь, это полезно для людей!

...