Цель этой статьи - предоставить четкие рекомендации о том, как настроить маршрутизацию в вашем приложении angular, если оно содержит несколько автономных модулей (что, вероятно, будет или будет сделано в будущем). Руководство angular.io для этого тоже неплохое, но я пишу его, чтобы помочь мне изучить предмет и, надеюсь, помочь другим людям, пока я им занимаюсь. Я также постараюсь быть более лаконичным.

Предпосылки:

  1. Это руководство предполагает некоторые базовые знания в области маршрутизации Angular (<base href>, <router-outlet> и т. Д. Если вы не знакомы с ними, вы можете прочитать об этом подробнее здесь.
  2. Приложение Angular 4+, созданное с помощью Angular CLI
  3. Один или несколько модулей помимо AppModule (по умолчанию сгенерированы интерфейсом командной строки). Я буду называть дополнительный модуль второстепенным модулем, а AppModule - основным модулем.
  4. [Необязательно] Один или несколько компонентов в новом Модуле

Шаг 1. Дайте второстепенному модулю отдельный файл модуля.

Это позволит разделить ваше приложение на модули, поскольку вы будете работать с каждым модулем индивидуально и импортировать модуль (вместе с его маршрутами) в свой app.module.ts файл. Чтобы уточнить, вторичный модуль, как ожидается, будет иметь один или несколько компонентов, которые будут добавлены к нему и будут действовать как «концентратор» для этих компонентов.

Шаг 2. Создайте модуль маршрутизации для дополнительного модуля.

Вместо объявления маршрутов в нашем secondary.module.ts файле мы создадим файл для хранения маршрутов нашего модуля. Это будет сделано и для app.module.ts.

Шаг 3. Импортируйте вторичные маршруты в соответствующий вторичный файл module.ts

Этот шаг довольно прост и не требует пояснений.

[Необязательно] Шаг 4. Создайте модуль маршрутизации для основного модуля.

Этот шаг не является обязательным, так как вы можете определять свои маршруты в своем app.module.ts, но для единообразия я бы посоветовал вам продолжить и создать дополнительный файл маршрутизации для вашего приложения, поскольку это может сэкономить вам некоторые проблемы, если ваше приложение станет более сложным.

Помните: вызывайте RouterModule.forRoot только в корневом AppRoutingModule (или AppModule, если именно там вы регистрируете маршруты приложений верхнего уровня). В любом другом модуле необходимо вызвать метод RouterModule.forChild для регистрации дополнительных маршрутов.

Шаг 5. Импортируйте дополнительный модуль в основной модуль (app.module.ts)

Вот и все! Еще раз, это руководство не слишком глубоко погружается в маршрутизацию, а скорее, как вы можете разделить свои модули и маршрутизацию, если ваше приложение нуждается в масштабировании.

Как я уже упоминал выше, эта статья была написана, чтобы облегчить мое обучение и, надеюсь, помочь некоторым другим людям. Любые комментарии или конструктивная критика приветствуются!