Вложенный роутинг для интернет магазина на Angular 9 + ng-universal, как организовать?

Для организации вложенного роутинга в интернет-магазине на Angular 9 с использованием ng-universal, вам понадобятся несколько шагов.

1. Установка и настройка Angular CLI:

• Установите Angular CLI, выполнив следующую команду в командной строке: npm install -g @angular/cli
• Создайте новый проект Angular с использованием следующей команды: ng new <project-name>

2. Создание основного маршрутизатора:

• В папке app создайте новый файл app-routing.module.ts
• В app-routing.module.ts создайте и настройте маршрутизацию для вашего интернет-магазина. Например:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: 'cart', loadChildren: () => import('./cart/cart.module').then(m => m.CartModule) },
  // Добавьте здесь другие маршруты для вашего интернет-магазина
];

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

3. Создание модулей для каждой страницы:

• В папке app создайте папку home, products и cart.
• В каждой из этих папок создайте новый модуль с помощью Angular CLI команды ng generate module <module-name>
• В каждом модуле создайте новый компоненты с помощью Angular CLI команды ng generate component <component-name>

4. Настройка вложенной маршрутизации внутри каждого модуля:

• В каждом модуле создайте файл routing.module.ts для вложенной маршрутизации.
• В routing.module.ts каждого модуля создайте и настройте маршрутизацию для этого модуля. Например, для модуля products:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProductsComponent } from './products.component';
import { ProductDetailComponent } from './product-detail.component';

const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'detail/:id', component: ProductDetailComponent },
];

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

5. Подключение вложенной маршрутизации в основном маршрутизаторе:

• В каждом модуле импортируйте и добавьте в imports соответствующий модуль маршрутизации. Например, в AppRoutingModule:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  // ...
  // Добавьте здесь другие маршруты для вашего интернет-магазина
  // ...
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HomeRoutingModule,
    ProductsRoutingModule,
    CartRoutingModule,
    // Импортируйте здесь другие модули маршрутизации для вашего интернет-магазина
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Это основная структура для организации вложенного роутинга в интернет-магазине на Angular 9 с использованием ng-universal. Конкретные компоненты и маршруты будут зависеть от вашей специфики интернет-магазина. Обратите внимание, что для работы ng-universal необходимо настроить серверный рендеринг Angular. Это выходит за рамки данного ответа, но вы можете найти больше информации в официальной документации Angular.