I'm having an issue with doing a redirect following a form submission for logging in on Angular 2. The application performs a full reload on the redirect to dashboard. I have checked several posts on stack overflow & other blogs, with no luck. This is the closest one; However, there is no answer on the thread. See my code below.
After I press the login, the page loads, and then reloads again. The URL is also changing to put the query string in the URL, which I suspect is causing the issue. How can I fix this issue? I suspect is has something to do with the way my form is set up.
auth.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgForm, FormBuilder, Validators } from '#angular/forms';
import { Router } from '#angular/router';
import { User } from '../shared/user';
declare var Materialize:any;
import { AuthService } from '../shared/services/auth.service';
#Component({
moduleId: module.id,
selector: 'logon',
templateUrl: 'auth.component.html',
})
export class AuthComponent implements OnInit {
currentUser = new User(null, '', '', '', '', 'vistor');
submitted = false;
authForm: NgForm;
#ViewChild('authForm') currentForm: NgForm;
constructor(
private router: Router,
public authService: AuthService
) { }
ngOnInit(): void {
}
onSubmit() {
this.submitted = true;
this.authService.login(this.currentUser).then(response => {
if (response) {
this.goToDashboard();
} else {
var toastContent = '<span><b>Invalid email or password!</b></span>';
Materialize.toast(toastContent, 5000, 'red');
}
});
}
goToDashboard() {
this.router.navigate(['dashboard']);
}
}
auth.component.html
<div class="container">
<div class="card">
<div class="card-content">
<span class="card-title">Logon</span>
<form materialize #authForm="ngForm" class="col s12">
<div class="input-field col s12">
<input required class="validate" id="email" type="email" name="email" [(ngModel)]="currentUser.email" #email="ngModel" validate="email">
<label for="email" data-error="Invalid Email">Email</label>
</div>
<div class="input-field col s12">
<input required class="validate" id="password" type="password" name="password" [(ngModel)]="currentUser.password" #password="ngModel" validate="password">
<label for="password" data-error="Invalid Password">Password</label>
</div>
<div class="card-action">
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
Angular 2 Routes
const routes: Routes = [
{ path: '', redirectTo: '/auth', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'spelling', component: SpellingComponent },
{ path: 'definition', component: DefinitionComponent },
{ path: 'auth', component: AuthComponent },
{ path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];
Don't use the type as submit in Angular Single Page applications. The reason might be
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In
<i class="material-icons right">send</i>
</button>
Try using
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="button">Log In
<i class="material-icons right">send</i>
</button>
Angular 2 needs an order in paths to show the correct routing, I think the solution is related with the order of paths. For example, you can try this:
const routes: Routes = [
{ path: '', redirectTo: '/auth', pathMatch: 'full' },
{ path: 'auth', component: AuthComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'spelling', component: SpellingComponent },
{ path: 'definition', component: DefinitionComponent },
{ path: '**', redirectTo: '/dashboard' }
];
and
goToDashboard() {
this.router.navigate(['dashboard/']);
}
Related
I finished to create the user register form.
After the sign up method is done, I want the page to redirect back to
home.
Now I installed vue-router with vue CLI command.
First, I put the router method after
this.$store.dispatch('signUpUser', signUpData) as the code below. But
I couldn't make it.
So I put this.$router.push({name: "Home"}) after jobsDone action,
because I have a vuex file.
I also tried this.$router.replace('/').
But still I cannot solve this issue.
Register.vue
<template>
<div>
<img src="../img/svg/Mangosteen.png" alt="">
<Navbar />
<b-card
class="register-card"
>
<form action="" #submit.prevent="onSignUp">
<div>
<b-form>
<p class="mt-3 text-center register-title">Register</p>
<b-form-input
id="input-1"
v-model="fullname"
type="text"
required
placeholder="fullname"
class="mt-5 input"
name="fullname"
v-validate="'required'"
:class="{ 'mt-5 input': errors.has('fullname') }">
>
</b-form-input>
<p v-show="errors.has('fullname')" class="validate text-center">{{ errors.first('fullname') }}</p>
<b-form-input
id="input-2"
v-model="phone"
type="tel"
required
placeholder="phone number"
class="mt-5 input"
name="phone number"
v-validate="'required'"
:class="{ 'mt-5 input': errors.has('phone number') }">
>
</b-form-input>
<p v-show="errors.has('phone number')" class="validate text-center">{{ errors.first('phone number') }}</p>
<b-form-input
id="input-3"
v-model="email"
type="email"
required
placeholder="Email"
class="mt-5 input"
name="email"
v-validate="'required|email'"
:class="{ 'mt-5 input': errors.has('email') }">
>
</b-form-input>
<p v-show="errors.has('email')" class="validate text-center">{{ errors.first('email') }}</p>
<b-form-input
id="input-4"
v-model="password"
type="password"
required
placeholder="Password"
class="mt-5 input"
name="password"
v-validate="'required|min:6'"
:class="{ 'mt-5 input': errors.has('password') }"
></b-form-input>
<p v-show="errors.has('password')" class="validate text-center">{{ errors.first('password') }}</p>
<error-bar :error="error"></error-bar>
</b-form>
<b-button class="registerbutton-color" type="submit" v-show="show" #click="click">Register</b-button>
<div v-if="busy">
<b-button class="registerbutton-color" type="submit" :disabled="busy">
<spring-spinner
:animation-duration="3000"
:size="27"
color="#ff1d5e"
class="loading"
/>
</b-button>
</div>
</div>
</form>
</b-card>
</div>
</template>
<script>
import Navbar from "#/components/Navbar.vue";
import ErrorBar from '#/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
export default {
data() {
return {
fullname: '',
phone: '',
email: '',
password: '',
show: true
}
},
components: {
ErrorBar: ErrorBar,
Navbar: Navbar,
SpringSpinner
},
methods: {
click() {
this.show = !this.show
},
onSignUp () {
this.$validator.validateAll()
.then(result => {
if(result){
const signUpData = {
fullname: this.fullname,
phone: this.phone,
email: this.email,
password: this.password
}
this.$store.dispatch('signUpUser', signUpData)
}
})
// .then(() => {
// this.$router.push({name: "Home"})
// })
},
jobsDone () {
this.removeErrors()
this.$router.push({name: "Home"})
//this.$router.replace('/')
},
removeErrors () {
this.$validator.reset()
this.$store.commit('clearError')
}
},
computed: {
error () {
return this.$store.getters.error
},
busy () {
return this.$store.getters.busy
},
jobDone () {
return this.$store.getters.jobDone
},
},
watch: {
jobDone(value) {
if(value) {
this.$store.commit('setJobDone', false)
this.jobsDone
}
}
}
}
</script>
This is my router/index.js file. The redirect page name is 'Home' and the path is '/'.
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Pro from '../views/Pro.vue'
import Products from '../views/Products.vue'
import Profile from '../views/Profile.vue'
import UserGroup from '../views/UserGroup.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/user-group',
name: 'UserGroup',
component: UserGroup
},
{
path: '/pro',
name: 'Pro',
component: Pro,
// meta: { requiresAuth: true },
children: [
{
path: '/products',
name: 'Products',
component: Products
},
{
path: '/profile',
name: 'Profile',
component: Profile,
},
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
I used in the default App.vue, and Pro.vue for admin user.
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
Pro.vue
<template>
<div>
<b-navbar toggleable="lg" type="dark" class="position-navbar">
<b-navbar-brand class="navbar" to="/">NavBar</b-navbar-brand>
<b-navbar-toggle class="navbar" target="nav-collapse">open</b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/profile" class="menu-padding"><span class="color">My information</span></b-nav-item>
<b-nav-item to="/products" class="menu-padding"><span class="color">Sell surprise bags</span></b-nav-item>
<b-nav-form>
<b-button size="md" class="my-2 my-sm-0 logout-color m-4" type="submit">Log out</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<!-- sidebar-content -->
<main class="page-content">
<router-view/>
</main>
<!-- page-content" -->
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.position-navbar {
top: 0;
position: absolute;
width: 100%;
z-index: 1100;
right: 0;
background: #5A3005;
}
.navbar {
color: white;
}
.menu-padding {
padding-right: 7rem;
}
a.nav-link {
padding: 0.3rem;
}
.color {
color: white;
font-size: 14px;
}
.logout-color {
border-radius: 27px;
width: 150px;
height: 40px;
color: white;
background: linear-gradient(85deg, #aa233a, #aa233a, 60%, #472958);
border: none;
}
</style>
I hope you help me out.
you have to write a beforeResolve meta-function for your registration route as this.
{
path: '/login',
name: 'login',
component: Login,
meta: {
beforeResolve(routeTo, routeFrom, next) {
// If the user is already logged in
if (store.getters['auth/loggedIn']) {
// Redirect to the home page instead
next({ name: 'home' })
} else {
// Continue to the login page
next()
}
},
},
}
this boilerplate code might help you.
I hava a Angular 8 application and I try to get lazy loading working.
Googled a lot.
So it seems that everything works. but not on the correct way. Because I have a page and on that page you have icons where you will be redirected to that seperated page with that id.
So the html template looks like this:
<app-topbar header="Hulpbronnen overzicht">
</app-topbar>
<!-- <app-vital10-page header="Hulpbronnen overzicht">
</app-vital10-page> -->
<div class="inner-body">
<app-is-loading *ngIf="!resourcesLoaded" message="Hulpbronnen worden geladen"></app-is-loading>
<app-no-entries
*ngIf="!hasResources && resourcesLoaded"
type="hulpbronnen"
[loads]="resourcesLoaded"
></app-no-entries>
<div class="mobile-resource-filter" (click)="showFilterForMobile = true" *ngIf="allResourceThemesKeys.length > 0">
<span class="fa fa-filter"></span>
</div>
<div class="resources">
<div class="resources-main">
<div class="resource-row" *ngFor="let key of resourceThemesKeys" [#fade]>
<h3 class="resource-row-title">{{ key }}</h3>
<div class="resource-items">
<app-resource-item *ngFor="let item of resourceThemes[key]" [resource]="item">
</app-resource-item>
</div>
</div>
</div>
<div
class="resources-side"
*ngIf="allResourceThemesKeys.length > 0"
[ngClass]="{'stuck-to-top': showFilterForMobile}"
>
<div class="resources-filter resource-row">
<h3 class="resources-header resources-header-filter resource-row-title">Thema Filter</h3>
<div class="resources-filter-body">
<div class="resource-filter-item">
<label for="filter-all" class="resources-filter-label">
<input
type="checkbox"
class="resources-filter-input resources-filter-input-all"
id="filter-all"
(change)="filterAll(allOn)"
[checked]="!allOn"
/>
Filter alles
</label>
<div class="resource-filter-close" *ngIf="showFilterForMobile">
<button type="button" class="button" (click)="showFilterForMobile = false">Sluit</button>
</div>
</div>
<div class="resources-filter-item">
<label for="{{ theme }}" class="resources-filter-label" *ngFor="let theme of allResourceThemesKeys">
<input
type="checkbox"
id="{{ theme }}"
class="resources-filter-input"
[checked]="resourceThemesKeys.indexOf(theme) !== -1"
(change)="handleFilterChange(theme)"
/>
{{ theme }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
And the router module looks like this:
const ResourceRouters: Routes = [
{
path: '',
component: ResourcePageComponent,
children: [
{path: '', pathMatch: 'full', canActivate: [AuthGuard] },
{path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard]}
]
}
];
#NgModule({
imports: [
RouterModule.forChild(ResourceRouters)
],
exports: [RouterModule]
})
and the main url looks like this:
http://localhost:4200/hulpbronnen
and then for example you have the id of:
http://localhost:4200/hulpbronnen/detail/6688089b-9794-4169-8569-260d427bed03
But now the content of that id will be rendered on the main page and not on his own component.
what it has to be
and in app.routes.ts I have it like this:
{path: 'hulpbronnen', loadChildren: () => import('./resource/resource.module').then(m => m.ResourceModule)},
So my question is:where I have to put the
<router-outlet></router-outlet>
Thank you
So that the child page will be show correct
You can try following approach if it suits you:
Create a new component ResourceIndexComponent- put the <router-outlet></router-outlet> into the html template there.
Restructure ResourceRoutes this way:
const ResourceRouters: Routes = [
{
path: '',
component: ResourceIndexComponent,
children: [
{ path: '', pathMatch: 'full', component: ResourcePageComponent, canActivate: [AuthGuard] },
{ path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard] },
],
},
];
please look image description hereI need to create a multi step form without using Angular UI Router & angular material.
could any one help me.
<div class="wizard">
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/information-form']" [routerLinkActiveOptions]="{exact: true}">
Submit Information
</a>
<a [class.disabled]="idTab" routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/id-form']" [routerLinkActiveOptions]="{exact: false}">
Submit Id
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/verify-identity']" [routerLinkActiveOptions]="{exact: false}">
Verify Identity
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/final-validation']" [routerLinkActiveOptions]="{exact: false}">
Final Validation
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/approval']" [routerLinkActiveOptions]="{exact: false}">
Approval
</a>
</div>
working CodesandBox
app.component.html
<div>
<span class="state-container" [ngStyle]="state === 1 && {'color': 'red'}"
>state 1</span
>
<span class="state-container" [ngStyle]="state === 2 && {'color': 'red'}"
>state 2</span
>
<span class="state-container" [ngStyle]="state === 3 && {'color': 'red'}"
>state 3</span
>
</div>
<div *ngIf="state === 1">
<form #f1="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
<label for="name">Name</label>
<input name="name" id="name" [(ngModel)]="user.name" />
<label for="family">Family</label>
<input name="family" id="family" [(ngModel)]="user.family" />
<button (click)="next(user)">Next</button>
</form>
</div>
<div *ngIf="state === 2">
<form #f2="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
<label for="address">Address</label>
<input name="address" id="family" [(ngModel)]="user.address" />
<button (click)="back()">Back</button>
<button (click)="next(user)">Next</button>
</form>
</div>
<div *ngIf="state === 3">
<p>The End</p>
<button (click)="back()">Back</button>
<button (click)="reset()">Reset</button>
<button (click)="save(user)">Save</button>
</div>
app.component.ts
import { Component, OnInit } from "#angular/core";
interface User {
name: string;
family: string;
address: string;
}
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title = "CodeSandbox";
state = 1;
user: User;
ngOnInit() {
this.user = {
name: "",
family: "",
address: ""
};
}
save(user: User) {
alert("Final Result:\n\n" + JSON.stringify(user));
}
next(user: User) {
++this.state;
alert(JSON.stringify(user));
}
back() {
--this.state;
}
reset() {
this.state = 1;
this.user = {
name: "",
family: "",
address: ""
};
}
}
app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { FormsModule } from "#angular/forms";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
I personally don't recommend this approach. Just remember, If you don't save the data and refresh the page your data is gone.
I have component that i want to inject into modal window using ng bootstrap features so i have imported modules into app also added into entrypoints as suggested in ng-bootstrap docs its giving me little hard time. what is correct approach basically i am calling modal from existing component and that component content should load into modal window. any help will be appreciate.
modal.component.ts
import {Component, Input} from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
#Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
detail.component.ts
import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '#angular/core';
import {NgbModal,NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'],
})
export class DetailComponent implements OnChanges{
constructor(private detailService: DetailService,private ngbModal: NgbModal) {};
onClick(evt){
const modalRef = this.ngbModal.open(Component);
}
}
detail.component.html
<div class="card card-outline-info">
<div class="card-header bg-info"><h5>Detail</h5><button (click)="onClick($event)"></button></div>
<div class="card-block">
<div class="table-responsive" style="cursor: pointer">
<generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>
</div>
</div>
app.module.ts
import { NgbModule,NgbActiveModal } from '#ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './NgModal/modal.component';
#NgModule({
declarations: [
AppComponent,
StreamComponent,
SearchComponent,
DetailComponent,
SlaChartComponent,
NgbdModalContent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
HttpModule,
ChartsModule,
BrowserAnimationsModule,
NgbModule.forRoot()
],
providers: [StreamService,DatePipe,
SearchService,
DetailService,
ChartService,AuthService,NgbActiveModal,
{provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true}],
entryComponents: [NgbdModalContent,DetailComponent],
bootstrap: [AppComponent]
})
Try this, I'm not a fan of your modal.component.ts file so scrap that and remove the NgbdModalContent from your app.module.ts
yourModal.component.html
<ng-template #theModal let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 *ngIf="type == 0" class="modal-title">Header</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" id="cancel-edit-btn" class="btn btn-primary" (click)="c('Close click')">Cancel</button>
</div>
</ng-template>
yourModal.component.ts
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, ElementRef, Renderer2 } from '#angular/core';
import { NgbModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-custom-modal',
templateUrl: './yourModal.component.html',
styleUrls: ['./yourModal.component.scss']
})
export class EditNotesComponent implements OnInit {
#Input() name: string;
#ViewChild('theModal') theModal: ElementRef;
constructor(private modalService: NgbModal) {}
ngOnInit() {
}
showModal() {
this.modalService.open(this.theModal, { size: 'sm', backdrop: 'static'});
}
}
detail.component.html
<div class="card card-outline-info">
<div class="card-header bg-info"><h5>Detail</h5><button (click)="yourCustomModal.showModal()"></button></div>
<div class="card-block">
<div class="table-responsive" style="cursor: pointer">
<generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>
</div>
</div>
<app-custom-modal #yourCustomModal [name]="name"></app-custom-modal>
detail.component.ts
import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '#angular/core';
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'],
})
export class DetailComponent implements OnChanges{
name: string;
constructor(private detailService: DetailService) {
this.name = 'John Doe';};
}
I have problem with my child routing in Angular 4. It isn't working while the parent routing is working. When i hover over the "Create New Account", it still is on the Account. It shows localhost:4200/account. It must be localhost:4200/account/create-account. The Parent route is on app.component.ts while the child route is on the account.component.html
//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Create New Account</a></li>
<li><a style="cursor: pointer;">View Account</a></li>
</ul>
</li>
<li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>
//app-routing.module.ts
import{ NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/account', pathMatch: 'full' },
{ path: 'account', component: AccountComponent, children: [
{ path: '', component: AccountStartComponent },
{ path: 'create-account', component: CreateAccountComponent },
{ path: 'view-account', component: ViewAccountComponent },
]},
{ path: 'news', component: NewsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
//account.component.html
<div>
<router-outlet></router-outlet>
</div>
You need to configure the routerLink
<li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>