Hello there. I am facing an issue where the button with routelink in the RegistrationComponent is not routing to the page of LogInComponent and I cannot figure out why. Angular is not throwing any errors. Here is the RouteComponent along with its view:
import { Component } from '../Vendor/@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '../Vendor/@angular/router-deprecated';
import { LogInComponent } from './LogIn';
@Component({
selector: 'reg',
templateUrl: './Views/RegView.html',
providers: [ROUTER_PROVIDERS],
directives: [ROUTER_DIRECTIVES, LogInComponent],
})
@RouteConfig([
{
path: '/logIn',
name: 'LogIn',
component: LogInComponent
}
])
export class RegistrationComponent {
}
view:
> <form>
> <div class=".col-lg-">
> <div>
> <input name="userName" placeholder="Username">
> </div>
> <div>
> <input name="password1" placeholder="******">
> </div>
> <div>
> <input name="password2" placeholder="******">
> </div>
> <div>
> <button>Register</button>
> </div>
> <div>
> <button [routerLink]="['LogIn']">Login</button>
> </div>
> </div> </from>
And this is the LogInComponent, which the RegistrationComponent should route to:
import { Component } from '../Vendor/@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '../Vendor/@angular/router-deprecated';
import { RegistrationComponent } from './Registration'
@Component({
selector: 'logIn',
templateUrl: './Views/LogInView.html',
providers: [ROUTER_PROVIDERS],
directives: [ROUTER_DIRECTIVES, RegistrationComponent]
})
@RouteConfig([
{
path: '/registration',
name: 'registration',
component: RegistrationComponent
}
])
export class LogInComponent {
constructor() { console.log("1");}
}
view:
<form>
<div>
<div>
<input name="userName" placeholder="Username">
</div>
<div>
<input name="password1" placeholder="******">
</div>
<div>
<button>Login</button>
</div>
<div>
<button [routerLink]="['Registration']">Register</button>
</div>
</div>
</form>
This is the main ApplicationComponent. It should invoke the RegistrationComponent:
import { Component } from '../Vendor/@angular/core';
import { RegistrationComponent } from './Registration';
@Component({
selector: 'app',
templateUrl: './Views/appview.html',
directives: [ RegistrationComponent ]
})
export class AppComponent {
}
view:
<reg></reg>