The Angular comes with multi demos layout in which you can choose either one. For demo purpose, all demos layout are enabled by default. Here is the guide on how to set only one demo for production use and to remove the demo name from the URL router.

All demos are in modular and easier to switch between demos from the router lazy-load. The demo layout is located in the folder /src/app/views/themes

For the pages router, use this router file /src/app/views/themes/[demo_id]/pages-routing.module.ts

1. Change the main router

Go to the main routing file; /src/app/app-routing.module.ts. The example router code below is how to use demo2 as a default. You can change the module path to use different demo module.

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

const routes: Routes = [
	{path: 'auth', loadChildren: 'app/views/pages/auth/auth.module#AuthModule'},

	// enable this router to set which default theme to load,
	// leave the path value empty to enter into nested router in ThemeModule
	{path: '', loadChildren: 'app/views/themes/demo2/theme.module#ThemeModule'},

	{path: '**', redirectTo: 'error/403', pathMatch: 'full'},
];

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

For example to use demo2 as a default.

{path: '', loadChildren: 'app/views/themes/demo2/theme.module#ThemeModule'},

For example to use default as a default.

{path: '', loadChildren: 'app/views/themes/default/theme.module#ThemeModule'},

2. Change the Metronic theme CSS

This step is optional, but improve the style loads. Go to the Angular index.html file; /src/index.html. Include the CSS based on the selected demo above.

For example;

<link id="demo" href="assets/demo/demo2/base/style.bundle.css" rel="stylesheet" >

Go to the main routing file; /src/app/views/themes/demo2/base/base.component.scss. You can remove it from this file

@import "../../../../../assets/demo/demo2/base/style.bundle.css";

3. Change the page Routes

This is a routing issue when using nested with empty parent path.

Open the menu config file; /src/app/core/_config/[demo]/menu.config.ts. Change and prepend all the link (page) start with slash (/). page: 'dashboard', to page: '/dashboard',

For example;

//...
			items: [
				{
					title: 'Dashboard',
					root: true,
					icon: 'flaticon2-architecture-and-city',
					page: '/dashboard',
				},
				{
					title: 'Layout Builder',
					root: true,
					icon: 'flaticon2-expand',
					page: '/builder'
				},
            //...

4. Set default config to load

Open the main app.module.ts file in /src/app/app.module.ts. Change the path to point it to the selected demo. For example for demo2 config file;

import { LayoutConfig } from './core/_config/demo2/layout.config';