I am looking to merge two sets of routes from different modules in my application.
The first module is located at:
./app-routing.module.ts
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {UserDashboardComponent} from './user-dashboard/containers/user-dashboard/user-dashboard.component';
import {NotFoundComponent} from './not-found/not-found.component';
const ROUTES: Routes = [
{ path: '', component: UserDashboardComponent, pathMatch: 'full' },
{ path: '**', component: NotFoundComponent, pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule {}
And the second module is located at:
./auth.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './login/containers/login-view/login-view.component';
import {RegisterComponent} from './register/containers/register-view/register-view.component';
export const ROUTES: Routes = [
{
path: 'auth',
children: [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
],
},
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(ROUTES)
],
})
export class AuthModule {}
The part where these two should converge is at:
./app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AuthModule} from '../auth/auth.module';
import {AppRoutingModule} from './app-routing.module';
import {UserDashboardModule} from './user-dashboard/user-dashboard.module';
import {AppComponent} from './app.component';
import {NotFoundComponent} from './not-found/not-found.component';
@NgModule({
declarations: [
AppComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
AppRoutingModule, // main routes
AuthModule, // authorization module which also has routes
UserDashboardModule,
],
providers: [],
bootstrap: [AppComponent],
exports: [NotFoundComponent],
})
export class AppModule {}
In my app.component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="app">
<router-outlet></router-outlet>
</div>
`,
})
export class AppComponent {}
Currently, I am only able to see the routes from 'app-routing.module.ts'. How can I also utilize the routes from auth?