Matt Atwell Matt Atwell - 1 year ago 120
AngularJS Question

Angular 2 Routing ( cannot load component)

For some reason angular 2 is looking for my component in app/app/aboutus.component and I cannot seem to find where the problem is arising.


import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

selector: 'my-app',
templateUrl: 'app/app.component.html',
export class AppComponent { }


import {Component, OnInit} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angularS/router';

selector: 'about-us',
templateUrl: 'app/aboutus.html',

export class AboutUsComponent {
teammembers: String[];
constructor() {

ngOnInit() {
this.teammembers = ['raja', 'steve', 'trevor'];



import { provideRouter, RouterConfig } from '@angular/router';

import { AboutUsComponent } from 'aboutus.component';

export const routes: RouterConfig = [
{path: 'aboutus', component: AboutUsComponent}

export const APP_ROUTER_PROVIDERS = [


//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, [


<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>
<a class="navbar-brand" href="javascript:void(0)">Angular 2 Routing</a>
<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>

The Template I want to route to is aboutus.html which only has a tag.
I am just getting started with Angular 2 routing and have been having issues with getting angular to find my components. As of now, I am getting a XHR 404 error on the aboutus.component.js and I have ran an npm install.

Thank you for any help!

Answer Source

For other error try this,

export const routes: RouterConfig = [
  {path: '', component: AboutUsComponent}
 {path: 'aboutus', component: AboutUsComponent}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download