I recently delved into learning Angular2 and started working on a sample project where I needed to navigate between three different pages.
In order to set up the routing, I configured a RouterModule within the app.module.ts file as shown below:
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path:'login',component : loginComponent},
{path:'logout',component :logoutComponent},
{path:'home',component : homeComponent}
])
The configuration of my app.component.ts file is as follows:
@Component({
selector: 'my-app', // <my-app></my-app>
providers: [Wakanda],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
Here's a snippet from my loginComponent.ts file:
@Component({
selector:'login',
template : `
<h1>Login</h1>
`
})
Similarly, the logoutComponent.ts file looks like this:
@Component({
selector:'logout',
template : `
<h1>Login</h1>
`
})
And lastly, the homeComponent.ts file consists of the following:
@Component({
selector : 'home',
template : `
<h1>Login</h1>
`
})
Within my app.component.html file, the navigation structure is set up as shown below:
<header>
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li>
<a routerLink ="./home">Home</a>
</li>
<li class="active">
<a routerLink="./login">LogIn</a>
</li>
<li>
<a routerLink="./logout">Log out</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<router-outlet></router-outlet>
</main>
Upon compiling the program, I encountered the following error:
EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''
If anyone has a solution to resolve this issue, your help would be greatly appreciated.
Thank you in advance.