0

В ходе выяснения принципов работы Lazy loading модулей в Angular 2+ сложил некую картину. Хотелось бы получить обратную связь правильно ли я понял как это работает, если нет, то как это на самом деле работает?

Lazy loading модуль как отдельное приложение со своим скоупом зависимостей, собирается в отдельный чанк, и при поиске компонентов, сервисов, директив, или интерсепторов задекларированных в других модулях, нужно импортировать их через общий модуль типа SharedModule, в который сваливаются общие сущьности. Тоесть в случае с Lazy loading модулем, при поиске зависимостей angular не поднимается до AppModule. Lazy loading модуль сам и является вершиной графа зависимостей, а прямое добавление сущностей из других модулей в providers, ломает этот подход делая его частью общего дерева зависимостей, что заставляет его грузится в режиме обычного модуля сразу. Вероятно связи из providers подтягиваются на этапе сборки проекта. Выходом может быть только использование imports так как вероятно, эта конструкция срабатывает только в момент запроса к модулю. Этот вопрос наверно влючает в себя вопрос о жизненном цикле модуля, так как все говорят про жизненные циклы компонентов а модуль в таком разрезе обсуждать как-то не принято.

Итого:

  1. Верно ли что зависимости providers и imports подтягиваются в разное время?
  2. Какие основные этапы жизненного цикла принципиально влияют на то, в какой момент Lazy loading модуль будет загружаться?
0

1 ответ 1

1

Перехватчики не относятся к декларациям, так как это сервисы.

Нет никакого графа, боль-во людей вообще непонятно откуда берет эту информацию, НО The biggest confusion regarding imported modules is that developers think they make a hierarchy. All modules are merged during compilation phase. У лейзи модулей есть свой инжектор, но если искомого провайдера там нет - то дальше лейзи модуль пойдет в рут инжектор, если же зависимости нет и в рут инжекторе, то будет эксепшн NullInjectorError: No provider for %token%.

Ответы на ваши вопросы:

1) Нет, не верно. В скомпилированном коде нет вообще такого понятия как imports, providers. На этапе компиляции AOTCompiler собирает информацию о модуле в module.metadata.json, после этого рекурсивно обходит все модули объявленные в imports, "вытаскивает" провайдеры и мерджит все это дело в определенную структуру, которая называется NgModuleDefinition.

Например:

@NgModule({
    imports: [HttpClientModule]
})
export class AppModule {}

Скомпилированный код:

var AppNgModuleFactory = createModuleFactory(
    AppModule,
    [],
    function() {
        return moduleDef([
            moduleProviderDef(4608, HttpClient, HttpClient, []),
            moduleProviderDef(5120, HTTP_INTERCEPTORS, (interceptor) => [interceptor], [])
        ]);
    }
);

4608 это 4096 | 512 = 4608, где 4096 - это NodeFlags.LazyProvider, а 512 - NodeFlags.TypeClassProvider, это битовая маска, которая описывает тип провайдера. А 5120 - это 4096 | 1024, где 1024 - это NodeFlags.TypeFactoryProvider.

Второй аргумент - это токен, третий - это значение, которое инжектор получит по токену, четверый - это зависимости (если бы HttpClient инжектил что-то в свой конструктор).

Конечно там мерджатся все провайдеры из HttpClientModule, я просто не стал их все перечислять тут. Точно также и с другими модулями.

По поводу SharedModule и зачем он нужен. Все декларации (компоненты, пайпы и директивы) компилируются в "определения". Компоненты в ViewDefinition, пайпы и директивы в NodeDef. Благодаря дефинишенам можно потом создать фабрику. exports это синтаксический сахар, который просто в будущем дает возможность получить доступ к ссылкам на фабрики этих деклараций.

2) Ответ на этот вопрос вы найдете здесь

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.