I am facing an issue with Angular 2 where it is searching for my component in app/app/aboutus.component, but I cannot pinpoint the source of the problem.
Here is my app.component.ts code:
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives:[ROUTER_DIRECTIVES]
})
export class AppComponent { }
Next, let's take a look at aboutus.component.ts:
import {Component, OnInit} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angularS/router';
@Component({
selector: 'about-us',
templateUrl: 'app/aboutus.html',
directives: [ROUTER_DIRECTIVES]
})
export class AboutUsComponent {
teammembers: String[];
constructor() {
}
ngOnInit() {
this.teammembers = ['raja', 'steve', 'trevor'];
}
}
Now, examining app.routes.ts:
import { provideRouter, RouterConfig } from '@angular/router';
import { AboutUsComponent } from 'aboutus.component';
export const routes: RouterConfig = [
{path: 'aboutus', component: AboutUsComponent}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
In main.ts, our main entry point into the app:
//main entry point into app
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
]);
Lastly, here is app.component.html:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Angular 2 Routing</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a>Pricing</a></li>
<li><a [routerLink]="['AboutUs']">About Us</a></li>
</ul>
</div>
</div>
</div>
<router-outlet></router-outlet>
The desired template to route to is aboutus.html, which simply contains an <h1> tag.
I am relatively new to Angular 2 routing and have been struggling to get Angular to recognize my components. Currently, I am encountering an XHR 404 error on the aboutus.component.js file even after running npm install.