Angular - Routing tow modules in one module

Question

I have auth.module and in this module I need to use login and register module.

I have to button login and register.

This is auth.html :

<div class="container">
<div class="login">
    <div class="form">
        <div class="formTop">
            <div class="signup-label">
                <a href="/register">register</a>
            </div>
            <div class="login-label">
                <a routerLink="/login">login</a>
            </div>
        </div>
        <router-outlet></router-outlet>
    </div>
    <div class="guide">

    </div>
</div>

and this is auth routing :

  const routes: Routes = [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(x => x.LoginModule)
  }
];

this page.routing.module:

  const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./cards/cards.module').then(x => x.CardsModule)
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(x => x.AuthModule)
  }
];

and this app.routing:

  const routes: Routes = [
  {
    path: '', loadChildren: () => import('./pages/pages.module').then(x => x.PagesModule)
  }
];

but when I click the on the login button it change route and chage page. I need when I click on the login or register change the route but not change the page auth, just change the content of auth.

now how can i solve this ???

Answer 1

your first route should look like

   {
     path: '',
     component: AuthComponent
     pathMatch: 'full'
   }

Take a look at this link for explanation why pathMatch: 'full' is important here.

Answer 2

app.routing:

const routes: Routes =
  [
    {
      path: '', loadChildren: () => import('src/app/pages/pages.module').then(m => m.PagesModule)
    }
  ];

pages-routing.module:

const routes: Routes =
  [
    {
      path: "", redirectTo: "auth", pathMatch: "full"
    },
    {
      path: 'auth', loadChildren: () => import('src/app/pages/auth/auth.module').then(m => m.AuthModule)
    }
  ];

auth-routing.module:

const routes: Routes =
  [
    {
      path: '', component: AuthComponent
    },
    {
      path: 'login', loadChildren: () => import('src/app/pages/auth/login/login.module').then(m => m.LoginModule)
    },
    {
      path: 'register', loadChildren: () => import('src/app/pages/auth/register/register.module').then(m => m.RegisterModule)
    }
  ];

auth.component.html:

<p>
    We are in Auth Compoent , this is layout;
</p>

<div class="login">
    <div class="form">
        <div class="formTop">
            <div class="signup-label">
                <a routerLink="/auth/register">register</a>
            </div>
            <div class="login-label">
                <a routerLink="/auth/login">login</a>
            </div>
        </div>
        <router-outlet></router-outlet>
    </div>
    <div class="guide">
    </div>
</div>

login-routing.module:

const routes: Routes =
  [
    {
      path: "", component: LoginIndexComponent
    }
  ];

register-routing.module:

const routes: Routes =
  [
    {
      path: "", component: RegisterIndexComponent
    }
  ];

Stackblitz Here