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

Точные версии Angular CLI и Node были:

Angular CLI: 6.2.9
Узел: 8.10.0
ОС: Linux x64

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

Служба AuthGuard

Я использовал службу AuthGuard для аутентификации моих пользователей и проверки, вошел ли пользователь в систему или нет. Типичный сервис AuthGuard выглядит так:

Создайте 2 модуля

Теперь создайте модуль, используя эту команду:

‘Ng g module ‹module-name› - - routing»

Создайте два модуля с именами module-1 и module-2. После выполнения команды создания модуля вы обычно найдете три файла, которые создаются автоматически.

Создавайте компоненты внутри модулей

Вы можете создать столько компонентов, сколько захотите, внутри модуля. Эти компоненты будут называться дочерними компонентами этого модуля. Создание компонента внутри модуля выполняется с помощью этой команды:

‘Ng g component module-1 / ‹component-name›’

Компонент входа

После того, как вы создали два модуля, модуль-1 и модуль-2, пора их маршрутизировать. Логика маршрутизации будет записана только в файле машинописного текста (ts) компонента входа в систему.

Маршрутизация основного приложения

Имея два модуля с компонентами внутри, пришло время связать маршрут этих модулей, что довольно просто. Ну вот!

app-routing.module.ts будет выглядеть так:

Модульная маршрутизация

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

Файловая структура модуля будет выглядеть так:

Наконец, перейдите к module-1-routing.module.ts, и внесите следующие дополнения:

Аналогично проделайте то же самое для модуля-2. И все готово!

Хотите, чтобы я загрузил демонстрационный проект на git? Дай мне знать в комментариях.

Удачного кодирования!