Angular 7 children component route without parent route

Question

I have a problem with routes in my Angular 7 application. I have a page frame, where I would like to switch to different components according to route without refreshing / changing main page frame. In my page frame I have <router-outlet> . My main route is http://localhost:4200/login .

When I go to this page, I would like to show component which is related to this route. My second route which I would like to show is http://localhost:4200/forgot-password . I would like to see on exactly the same page second component which is related to forgot password form. I tried to achieve this with children and it works, but when I make a redirection it adds /forgot-password at the end of existing http://localhost:4200/login url. In this case I've always receive http://localhost:4200/login/forgot-password in url. What I'm trying to achieve is to show in url http://localhost:4200/forgot-password , without /login .

app.routes.ts

// Login Page
    {
      path: 'login',
      component: LoginComponent,
      canActivate: [ HTTPSGuard ],
      children: [
        {
          path:'',
          component: Login2ComponentComponent,
          data: {
            animation: 'Sign-In'
          }
        },
        {
          path: 'forgot-password',
          component: ForgotPassword2Component,
          data: {
            animation: 'Forgot-Password'
          }
        }
      ]
    }

In my login component I have a link: <a [routerLink]="['/forgot-password']">Go to forgot</a>

But it adds me to the current /login route /forgot-password .

Maybe there is a router attribute which I can use in app.routes.ts to make this happened?

Thank you for help!

Answer 1

With your code you are set the ForgotPassword2Component become the sub route of the login route so you should change your code to this

    {
      path: 'login',
      component: LoginComponent,
      canActivate: [ HTTPSGuard ],
      children: [
        {
          path:'',
          component: Login2ComponentComponent,
          data: {
            animation: 'Sign-In'
          }
        }
      ]
    },
    {
          path: 'forgot-password',
          component: ForgotPassword2Component,
          data: {
            animation: 'Forgot-Password'
          }
    }