Исключить из сборки некоторые ленивые модули (Angular5)

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

Является ли это возможным?

Может ли canload помочь? Или мы должны удалить (не собирать) файлы js?

Buggy 30.09.2018 10:10

Какова настоящая цель? Поскольку модули загружаются лениво, они не загружаются, если не используются, поэтому нет проблем с производительностью, они просто займут немного больше места на жестком диске, но это смехотворно.

Guerric P 01.10.2018 14:18

вы пытаетесь сделать это по маршруту? или как приложение узнает, нужен модуль или нет?

JBoothUA 03.10.2018 21:31

@GuerricP кажется мне больше похожей на проблему времени компиляции, что было бы большим бременем во время разработки

Simon_Weaver 11.02.2020 04:07

@Iter Ator Вы нашли решение своей проблемы, мне нужно реализовать что-то вроде этого

poojagupta 11.12.2020 15:48

@poojagupta Нет, решения нет.

Iter Ator 26.12.2020 14:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
7
6
782
3

Ответы 3

Попробуйте добавить модули в настройку exclude в вашем файле tsconfig.app.json.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
    "path/to/your/lazy.module.ts"
  ]
}

Путь должен быть относительно настройки baseUrl.

Теперь я не уверен, как обстоят дела с вашей настройкой (проект с несколькими приложениями? 1 сборка для каждого клиента?), Но это должно работать, если каждая сборка имеет правильный файл конфигурации.

Я исключил один модуль из сборки, но у меня возникла ошибка вроде того, что sis.module.ts отсутствует в компиляции TypeScript. Убедитесь, что он находится в вашем tsconfig через свойство 'files' или 'include'.

malbarmavi 01.10.2018 10:19

@malbarmawi И вы не ссылаетесь явно на этот модуль в своем коде, верно? (с использованием import)

David 01.10.2018 11:50

Это невозможно с текущим набором инструментов. Компилятор AOT в настоящее время (до V7) не поддерживает условную загрузку маршрутов. В результате это также не поддерживается CLI. Вы можете создать ситуацию, когда маршруты защищены от пользователя маршрутизаторами-охранниками, но для построения они должны присутствовать. Это связано с тем, что NGC необходимо статически анализировать дерево маршрутизаторов. Есть некоторые долгосрочные планы, которые могут изменить это в будущем.

Если вы хотите сэкономить на времени сборки, вы можете переместить эти части в библиотеки, но тогда вам все равно понадобится небольшой модуль, чтобы иметь возможность лениво загружать их. (по тем же причинам нельзя загружать библиотеки лениво.) На GitHub есть пара проблем по этому поводу. это - хороший вариант для начала, если вы хотите вникнуть в это глубже,

Как насчет чего-то вроде этого: (затем вы можете использовать операторы if и т. д. для загрузки разных модулей)

export class AppComponent implements AfterViewInit {

  @ViewChild('testOutlet', {read: ViewContainerRef}) testOutlet: ViewContainerRef;
  constructor(
    private loader: NgModuleFactoryLoader,
    private injector: Injector) {
    }

    ngAfterViewInit(): void {
    const path = 'src/app/lazy/lazy.module#LazyModule';
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
      const entryComponent = (<any>moduleFactory.moduleType).entry;
      const moduleRef = moduleFactory.create(this.injector);

      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
      this.testOutlet.createComponent(compFactory);
  });
  }
}

Другие вопросы по теме