ngx-admin / nebular how to create page outside pages module?

Question

I just experimenting ngx-admin, I want to create a page that has no header and footer like pages, so I create a module with

ng g m print --route print --module app.module

inside routes

export const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
      .then(m => m.PagesModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'print', loadChildren: () => import('./print/print.module').then(m => m.PrintModule) },
  { path: '**', redirectTo: 'pages' },
];

in pages-menu.ts

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'E-commerce',
    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'Print',
    link: '/print'
  },.....// the original menu in here 

When I run and clikc the print link, it just show blank page with nothing inside. I still have no idea how to create custom page in ngx-admin

I follow the instruction in here https://akveo.github.io/nebular/docs/auth/custom-auth-components#related-articles but it doesnt work as well.

I use angular 11 for this project and latest ngx-admin

Answer 1

1. Create print module & component outside the page module

ng g m print --routing=true
ng g c print --inline-template=true --skip-tests=true --inline-style=true

2. inside print.component.ts do this

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-print',
  template: `
      <router-outlet></router-outlet>
  `,
  styles: [
  ]
})
export class PrintComponent implements OnInit {   
  constructor() { }    
  ngOnInit(): void {
  }    
}

3. On app-routing.module.ts add:

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

4. Now try to access it from /print/ it shouold load your empty page without any layout components.

Answer 2

You should create PrintRoutingModule on Print folder, then import that file to PrintModule.

print-routing.module.ts

export const routes: Routes = [
  {
    path: '',
    component: PrintComponent,
  },
];

const config: ExtraOptions = {
  useHash: false,
  relativeLinkResolution: 'legacy'
}

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

it works for me, or you can change the

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

to

  {
    path: 'print',
    component: PrintComponent,
  },

both produce the same thing