I have set up my app.routes.ts file and imported all the necessary dependencies.
Afterward, I connected all the routes to their respective Components as follows:
import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AttendanceComponent} from './attendance/attendance.component';
import {LoginComponent} from './login/login.component';
//Route Configuration
export const routes: Routes = [
{path: '', component: LoginComponent},
{path: 'attendance', component: AttendanceComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
I initialized my app in my app.module:
import { Component, NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
//declarations
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { routing, routes } from './app.routes';
//decorator
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
RouterModule
],
declarations: [
AppComponent,
LoginComponent,
AttendanceComponent
],
//add services
//providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [ AppComponent ]
})
export class AppModule {
//module class
}
In my app.component, a call is made to the landing page
import {Component} from '@angular/core';
import {LoginComponent} from './login/login.component';
@Component({
selector: 'oosc_app',
template: `<login></login>`
})
export class AppComponent{
}
The landing page is login.template.html:
<body class="login">
<div id="login" class="login-position>
<div class="logo">
<a href="index.html"><img src="assets/images/oosc-logo-login.png" alt="" /></a>
</div>
<div class="wrapper-login">
<input type="text" placeholder="TSC Number" class="user"/>
<input type="password" placeholder="Password" class="password"/>
</div>
<!--<a [routerLink]="['/attendance']" class="login-button">Sign in</a>-->
<a [routerLink]="['/attendance']" class="login-button">Sign in</a>
<router-outlet></router-outlet>
<span>Not a member ?<a href="#">Create your account</a></span>
</div>
</body>
Upon clicking the sign-in button, the router link should direct to attendance.component.ts and display the view.
The issue arises when the sign-in button is clicked, it redirects to localhost:3000/attendance but fails to switch from the login view to the attendance view.
Below is my attendance.component.ts:
//The content has been split into headers and footers with the templateUrl being called
//in a component named Content
import {Component} from '@angular/core';
import {OnInit} from '@angular/core';
import {HeaderComponent} from '../partials/header.component';
import {FooterComponent} from '../partials/footer.component';
import {ContentComponent} from '../partials/content.component';
@Component({
selector: 'attendance',
//templateUrl: `/app/attendance/attendance.template.html`
template: `<header></header><footer></footer>`,
providers: [HeaderComponent, ContentComponent, FooterComponent]
})
export class AttendanceComponent implements OnInit{
ngOnInit(){
console.log('ngOnInit');
}
}
What could be causing this problem?
Why is it not navigating to the correct view?