Angular 2 (final release) child routing

Question

I am trying to navigate to a child component from a child component. I have 3 main route as below

--Home

--SignUp

--Login

In the Login template (auth.template.html) , I have an option to navigate to SignUp. However the routing I setup as below doesnt do that. It always give me http://localhost:xxxx/auth/signup

I am not able to load the signup component from auth component. Looks like I am missing some fundamentals but I am not sure what it is. Below are the code snippets.

app.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { HomeComponent }            from './home/home.component';
import { NotFoundComponent }        from './notfound/not-found.component';


export const routing = RouterModule.forRoot([
    { path: '', component: HomeComponent},
    { path: '**', component: NotFoundComponent }
])

app.module.ts

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';

import { AppComponent }     from './app.component';

import { HomeModule }       from './home/home.module';
import { AuthModule }       from './authentication/auth.module';
import { SignupModule }     from './signup/signup.module';
import { NotFoundModule }   from './notfound/not-found.module';

import { routing }          from './app.routing';
import { authRouting }      from './authentication/auth.routing';
import { signupRouting }    from './signup/signup.routing';

import { AuthService }      from './authentication/auth.service';
import { AuthGuard }        from './authentication/auth-guard.service';

@NgModule({
    imports     : [BrowserModule, HomeModule, AuthModule, ProfileModule, NotFoundModule, SignupModule, authRouting, signupRouting, routing],
    declarations: [AppComponent],
    providers   : [AuthService, AuthGuard],
    bootstrap   : [AppComponent]
})

export class AppModule { }

auth.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { AuthComponent }  from './auth.component';

export const authRouting = RouterModule.forChild([
    { path: 'auth', component: AuthComponent },
])

signup.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { SignupComponent }  from './signup.component';

export const signupRouting = RouterModule.forChild([
    { path: 'signup', component: SignupComponent }
])

app.template.html

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
       ....
        <div class="navbar-collapse collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right"  data-toggle="collapse" data-target=".navbar-collapse.in" >
                <li>
                    <a routerLink="">
                       Home
                    </a>
                </li>
                <li>
                    <a routerLink="signup">
                        Signup
                    </a>
                </li>
                <li >
                    <a routerLink="auth">
                       Login
                        </a>
                    </li>
            </ul>
        </div>

    </div>
</div>
<div class="container-fluid">
    <router-outlet></router-outlet>
</div>

auth.template.html

 <div class="form-group">
      <p>
          Dont have an account yet? Sign up <a routerLink="signup" <strong>here</strong></a>
      </p>
  </div>

Answer 1

routerLinks use relative routing. If you are at the auth route and the link is routerLink="signup", then the link will lead to the auth/signup. To traverse backwards, use ../ just like a file system. So if auth and signup are on the same level (siblings), then you should traverse up to the parent, then go to signup.

So you should use routerLink="../signup".

And just FYI... if you want to start the path from the root, then you would start the link with /.