Open Login component as Separate Page

Question

I want to open login page in separate. But its opening in inside routeroutlet page. Please help.

PFB below screenshot for your reference.

Please refer my code below.

App.Routing.ts :

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const AppRoute: Routes = [
    { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' },
    { path: 'login', component: LoginCoHomeComponentmponent },
    { path: 'home', component: HomeComponent },

];

App.Component.html

<div id="wrapper">
   <app-top-bar></app-top-bar>
   <router-outlet></router-outlet>
</div>

App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SelectModule } from 'ng2-select';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

import { AppComponent } from './app.component';
import { SideBarComponent } from './components/side-bar/side-bar.component';
import { TopBarComponent } from './components/top-bar/top-bar.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

import { AppRoute } from './app.routing';
import { RouterModule } from '@angular/router';
import { Service } from './Service/service';
import { ConfigService } from './Service/config.service';
import { HomeComponent } from './components/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    SideBarComponent,
    TopBarComponent,
    DashboardComponent,
    RoleManagementComponent,
    UserManagementComponent,
    UserListComponent,
    LoginComponent,
    HomeComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(AppRoute),
    SelectModule,
    Ng2Bs3ModalModule,
    MyDatePickerModule
  ],
  providers: [{ provide: LocationStrategy, useValue: '/AAA', useClass: HashLocationStrategy }, Service, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.Componenet.html: Modified

 <div id="wrapper">
   <router-outlet></router-outlet>
 </div>

Home.component.html Modified

<app-top-bar></app-top-bar>

app-top-bar contains top menu and side bar user menus. Its is static component.

Thanks in advance.

Answer 1

In your App.Component.html : change to this : <router-outlet></router-outlet> so remove <app-top-bar></app-top-bar>

In App.Routing.ts : change { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' }

To:

{ path: '', component: LoginComponent},
{ path: 'dashboard', component: DashboardComponent,
          children: [
             { path: 'page1', component: Page1Component},
             { path: 'page2', component: Page2Component}
          ]
}

In dashboard.component.html : (Home)

<header-bar>
<side-bar>
<router-outlet></router-outlet>