Being new in angular, I want to structure my layout into two
navigationnavigationQuestion: Is it possible to have more than 1 app.component, if yes how?
app.component.html:
<app-nav></app-nav>
<section>
<router-outlet></router-outlet>
</section>
external.component.html:
<router-outlet></router-outlet>
There is a solution of that without using two app.component.ts. I put the files as I used in my current project.
app.component.ts
<app-http-loader></app-http-loader>
<div class="app-root-style">
<router-outlet></router-outlet>
</div>
app.router-modules.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'auth', loadChildren: './auth/auth.module#AuthModule', canLoad: [AuthGuard] },
{ path: 'home', loadChildren: './home/home.module#HomeModule', canLoad: [HomeGuard] },
{ path: '**', component: FourZeroFourComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
auth-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'login' },
{ path: 'login', component: LoginComponent },
{ path: 'forgotpassword', component: ForgotPasswordComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AuthRoutingModule { }
home-routing.module.ts
const routes: Routes = [
{
path: '', component: HomeComponent, children: [
{ path: 'dashboard/:uid', component: DashboardComponent },
{ path: 'userinfo', loadChildren: '../user/user.module#UserModule', canLoad: [HomeGuard] },
}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
This way you achieve the whole routes
url's will be like this:
https://localhost:4200/auth/login
https://localhost:4200/home/dashboard/23
See I use Guard here to Guard the routes if user not logged in
You can have as many router outlets as you want. Simply declare children of your route. Something like that :
const routes = [
{ path: '', component: AppComponent, children: [
{ path: 'home', component: HomeComponent, children: [...] },
{ path: 'profile': component: ProfileComponent, children: [...] },
]}
];
<!-- Home component template -->
<div>
<button (click)="login()">Login</button>
<button (click)="signup()">Sign up</button>
</div>
<router-outlet></router-outlet>
<!-- Profile component template -->
<div>
<button routerLink="dashboard">Dashboard</button>
<button routerLink="settings">Settings</button>
</div>
<router-outlet></router-outlet>
