Router Malfunction - html

Question

So I am having an issue with two components which have to do with routers/routing/router-outlets. In my login form when the user enters the info(email and password) and clicks login they should be routed to the dashboard.
See below the login form component and its accompanying ts/css/html files
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import {AngularFireAuth} from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import {Observable} from 'rxjs/Observable';
import { auth } from 'firebase/app';
#Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
user: Observable<firebase.User>;
authenticated: boolean = false;
error: any;
constructor(private router:Router,public af: AngularFireAuth) {
this.af.authState.subscribe(
//look at this again
(auth) => {
if (auth != null){
this.user = af.authState;
this.authenticated = true;
this.router.navigate(['dashboard']);
}
}
)
}
ngOnInit() {
}
loginUser(e){
e.preventDefault();
console.log(e.value);
var email = e.target.elements[0].value;
var password = e.target.elements[1].value;
console.log(email,password);
this.af.auth.signInWithEmailAndPassword(email,password)
.then((success) => {
console.log(success)
this.authenticated = true;
console.log("attempting to nav");
this.router.navigate(['dashboard']);
console.log("nav worked");
}).catch((err) => {
this.error= err;
})
//end of if statement
}//end of login user
}
HTML for Login Form
<div class="form">
<span class="error" *ngIf="error">{{ error }}</span>
<form (submit) = "loginUser($event)">
<input type="text" placeholder="Email Address"/>
<input type="password" placeholder="Password"/>
<button type = "submit">login</button>
</form>
</div>
HTML for appCompnent that controls the first screen you see which has the login form enclosed
<div id = "fullPage">
<app-header></app-header>
<app-login-form></app-login-form>
<app-footer></app-footer>
</div>
AppModule.ts which contains routes
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '#angular/router';
import {Router} from '#angular/router';
import { Route } from '#angular/compiler/src/core';
//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
//Forms
import {FormsModule} from '#angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '#angular/core/src/metadata/directives';
const appRoutes:Routes = [
{
path: 'login',
component: LoginFormComponent
},{
path: 'dashboard',
component: DashboardComponent
},{
path: 'events',
component: EventsComponent
},{
path: 'add-event',
component: AddEventComponent
},{
path: 'edit-event/:id',
component: EditEventComponent
},{
path: 'delete-event/:id',
component: DeleteEventComponent
},{
path: 'event-details',
component: EventDetailsComponent
}
]
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginFormComponent,
FooterComponent,
DashboardComponent,
EventsComponent,
EventDetailsComponent,
AddEventComponent,
EditEventComponent,
DeleteEventComponent,
NavbarComponent
],
imports: [
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I followed a lot of tutorials so I believe I have done it right. However, it does not go to the dashboard. Any hints? Is it because I don't have a router-outlet in place of the app-login-form?

Answer 1

By the above code snippet, it seems that you have missed "router-outlet" tag which needs to be included in a template from where you try to navigate to the dashboard page. It should resolve your issue.