app.component.html

<!-- navbar -->
<nav>
    <div>
        <div>
            <a href="#">Home</a>
        </div>
        <ul>
            <li><a routerLink="/signup">Signup</a></li>
        </ul>
    </div>
</nav>

<!-- SPA content -->
<div>
    <router-outlet></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import 'hammerjs';

import { AppComponent } from './app.component';
import { AppRoutingModule, routingComponents } from './app.routing';

@NgModule({
    declarations: [AppComponent, routingComponents],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignupComponent } from './signup/signup.component';

const appRoutes: Routes = [
    { path: 'signup', component: SignupComponent },
    { path: '', pathMatch: 'full', redirectTo: 'signup' }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }
export const routingComponents = [SignupComponent];

signup.component.html

<form role="form" #form="form" (ng-submit)="submit(form.value)">
    {{diagnostic}}
    <fieldset>
        <legend>Create Account</legend>
        
        <label><strong>Email:</strong></label>
        <input name="Email" [(ng-model)]="user.email" required type="email" placeholder="Enter your email address" />
        
        <label><strong>Password:</strong></label>
        <input name="password" [(ng-model)]="user.password" required type="password" />
        
        <div>
            <button type="submit">Create</button>
            <button>Cancel</button>
        </div>
    </fieldset>
</form>

signup.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}