Routing

Basic Use for Route

Create a feature module: Create a separate module for the nested feature you want to load lazily. For example, if you have a "Products" feature with its own routes, create a products.module.ts file.

typescript

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

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

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

@NgModule({
  declarations: [ProductsComponent, ProductListComponent, ProductDetailComponent],
  imports: [CommonModule, RouterModule.forChild(routes)],
})
export class ProductsModule { }

Add lazy loading route: In your main routing module (app-routing.module.ts), add a lazy loading route

to the nested feature module.

typescript

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  },
  { path: 'contact', component: ContactComponent },
  // ... other routes
];

Configure the router module: Make sure the feature module (ProductsModule in this example) is imported in the main module (app.module.ts) and its routing module (ProductsRoutingModule) is not imported anywhere.

When you have multiple <router-outlet> directives in your Angular application, you can specify the outlet where a routed component should be displayed by providing a router-outlet name in the route configuration.

Here's how you can separate and target different <router-outlet> directives:

Define named <router-outlet> directives: In your template, define multiple <router-outlet> directives and give each one a unique name.

html

<!-- app.component.html -->
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

Configure named outlets in route configuration: In your routing configuration, specify the outlet property with the corresponding name for each route that should be rendered in a specific outlet.

typescript

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    outlet: 'sidebar'
  },
  // ... other routes
];

Trigger the correct outlet in nested routes: When you have nested routes, you can target a specific <router-outlet> by using the children property and specifying the outlet property for the child routes.

typescript

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      { path: '', component: ProductListComponent, outlet: 'sidebar' },
      { path: ':id', component: ProductDetailComponent, outlet: 'sidebar' }
    ]
  },
  // ... other routes
];

In the above example, the ProductListComponent and ProductDetailComponent will be rendered in the <router-outlet name="sidebar"> since their routes specify the outlet property as 'sidebar'.

To trigger the correct outlet in nested routes, you can use the routerLink directive in your templates and provide the outlet property along with the path.

html

<!-- app.component.html -->
<a routerLink="/products" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" outlet="sidebar">Products</a>

By providing the outlet property in the routerLink directive, you can ensure that the route is activated in the correct outlet.

First-level routes

The First-level routes are placed in apps/web/src/app/app.routes.ts, all the components used in is lazy loaded from collab-web application.

const webAppRoutes: Routes = [
    ...
    {
        path: '',
        resolve: {
            __baza_core_registry: BazaRegistryNgResolve,
        },
        children: [
            ...
            {
                path: '',
                canActivateChild: [MetaGuard],
                component: LayoutComponent,
                children: [
                    {
                        path: '',
                        loadChildren: () => import('@scaliolabs/collab-web/feature-home').then((m) => m.HomeModule),
                    },
                    {
                        path: 'favorites',
                        canActivate: [JwtRequireAuthGuard, JwtVerifyGuard],
                        loadChildren: () =>
                            import('@scaliolabs/collab-web/feature-favorite').then((m) => m.FavoriteModule),
                    },
                    ...
                ],
                resolve: {
                    bootstrap: BootstrapResolver,
                },
            },
           ...
        ],
    },
];

Second-Level Routes

In the collab-web library, all the sub-library which name is start with feature- is a page feature library, and the second-level route is defined in it. 💯

// feature-home/src/lib/home-routing.module.ts

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: HomeComponent,
            },
        ],
    },
    {
        path: 'how-it-works',
        component: HomeHowItWorksComponent,
        data: {
            meta: {
                title: 'How It Works',
            },
        },
    },
    {
        path: 'privacy-policy',
        component: PrivacyPolicyComponent,
        data: {
            meta: {
                title: 'Privacy Policy',
            },
        },
    },
    {
        path: 'terms-of-service',
        component: TermsOfServiceComponent,
        data: {
            meta: {
                title: 'Terms Of Service',
            },
        },
    },
    {
        path: 'eft-disclosure',
        component: EftDisclosureComponent,
        data: {
            meta: {
                title: 'Electronic Funds Transfers Disclosure',
            },
        },
    },
    {
        path: 'about-us',
        component: AboutUsComponent,
        data: {
            meta: {
                title: 'About Us',
            },
        },
    },
    {
        path: 'about-us/qianwang',
        component: BiographyComponent,
        data: {
            meta: {
                title: 'About Us',
            },
        },
    },
];

🎉 In the feature-home library, there are a simple summay for it.

Routing ​

Basic Use for Route ​

First-level routes ​

Second-Level Routes ​

Routing

Basic Use for Route

First-level routes

Second-Level Routes