Angular - Auxiliary routing with Lazy loading

Question

I have a project with multiple routings modules that are lazy loaded (see bellow). The primary outlet routing works like a charm, http://localhost:4200/lists/contacts/new renders correct component.

I am trying to add a fuction to open particular route in modal window. For example: add contact directly from Home in through modal window.

I have added (just for testing purposes) another outlet:

<router-outlet></router-outlet>
<router-outlet name="modal" ></router-outlet>

And action button:

<a [routerLink]="[{ outlets: { modal: ['lists/contacts/new'] } } ]">Test</a>

which has rendered href: http://localhost:4200/home/(modal:lists/contacts/new)

However, opening that URL wont render anything to modal outlet. What am I doing wrong? Thanks!

ROOT routing (app-routing.module.ts):

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

import { AppShellComponent } from '@app/shell/';

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

import { AuthGuard } from './core';

const routes: Routes = [

    {

        // PUBLIC routing
        {
             path: 'public',
             loadChildren: () => import('./public/public.module').then(m => m.PublicPagesModule)
        },

        path: '',
        component: AppShellComponent,
        canActivate: [AuthGuard],
        children: [

            {
                path: 'home',
                component: HomeComponent,
                pathMatch: 'full'
            },

            {
                path: 'lists',
                loadChildren: () => import('./lists/lists.module').then(m => m.ListsModule)
            },

            {
                path: 'settings',
                loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)
            },

            {
                path: '',
                redirectTo: '/home',
                pathMatch: 'full'
            },


            {
                path: 'not-found',
                component: NotFoundComponent
            },

            {
                path: '**',
                component: NotFoundComponent
            }
        ]
    },

    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];

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

Lists Module routing (lists-routing.module.ts):

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

import { ContactsListComponent, ContactDetailComponent, ContactEditComponent } from './contacts';
import { ItemsListComponent, ItemEditComponent } from './items';
import { PriceListEditComponent, PriceListsListComponent } from './price-lists';

const _routes: Routes = [

    {
        path: 'contacts',
        loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
    },

    {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
    },

    {
        path: '',
        redirectTo: '/lists/contacts',
        pathMatch: 'full'
    }
];

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

Contacts Module routing (contacts-routing.module.ts):

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

import { ContactDetailComponent } from './detail/detail.component';
import { ContactEditComponent } from './edit/edit.component';
import { ContactsListComponent } from './list/list.component';

const _routes: Routes = [

    {
        path: 'new',
        component: ContactEditComponent,
        pathMatch: 'full'
    },

    {
        path: ':id',


        children: [
            {
                path: '',
                component: ContactEditComponent,
                pathMatch: 'full'
            },
            {
                path: 'edit',
                component: ContactEditComponent,
                pathMatch: 'full'
            }
        ]
    },

    {
        path: '',
        component: ContactsListComponent,
        pathMatch: 'full'
    }
];

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

Luckylooke Luckylooke · Accepted Answer · 2019-12-06T12:33:18

You need to define routes also for outlet: https://angular.io/guide/router#add-a-secondary-route

example:

{
  path: 'compose',
  component: ComposeMessageComponent,
  outlet: 'popup'
},

Stackblitz example: https://stackblitz.com/edit/angular-fk3ztp

Angular - Auxiliary routing with Lazy loading

1 Answers