Как в приложении Angular загружать разные модули для админа и обычного пользователя?

В Angular есть несколько способов загрузки разных модулей для админа и обычного пользователя в приложении.

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

Для этого сначала создайте отдельные модули для админа и обычных пользователей:

- admin.module.ts
- user.module.ts

Затем в основном модуле приложения (например, app.module.ts) установите ленивую загрузку для соответствующих роутов:

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Теперь, когда пользователь попадает на "admin" или "user" роуты, соответствующие модули будут загружены только по требованию.

2. Использование конфигурации среды.
В зависимости от типа пользователя (админ или обычный пользователь), вы можете загружать разные модули, опираясь на настройки среды приложения. Для этого, создайте файлы конфигурации среды для каждого типа пользователя (например, environment.admin.ts и environment.user.ts).

В каждом файле конфигурации среды определите соответствующий модуль, который должен быть загружен для данного типа пользователя:

environment.admin.ts

export const environment = {
  production: false,
  module: 'admin'
};

environment.user.ts

export const environment = {
  production: false,
  module: 'user'
};

Затем, в основном модуле приложения, используйте соответствующий модуль, опираясь на настройки среды:

app.module.ts

import { environment } from '../environments/environment';

let moduleToLoad: any;

if (environment.module === 'admin') {
  moduleToLoad = import('./admin/admin.module').then(m => m.AdminModule);
} else if (environment.module === 'user') {
  moduleToLoad = import('./user/user.module').then(m => m.UserModule);
}

@NgModule({
  imports: [
    BrowserModule,
    moduleToLoad // загрузка соответствующего модуля
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь, в зависимости от настроек среды, соответствующий модуль будет загружен при старте приложения.

3. Использование условия в compile-time.
Если вы знаете тип пользователя во время компиляции, вы также можете использовать условное включение модулей при сборке приложения.

app.module.ts

import { AdminModule } from './admin/admin.module';
import { UserModule } from './user/user.module';

const userRole = 'admin'; // здесь может быть какое-то условие

@NgModule({
  imports: [
    BrowserModule,
    userRole === 'admin' ? AdminModule : UserModule // условная загрузка модуля
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь, в зависимости от значения переменной userRole, будет загружен соответствующий модуль.

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