Matt Atwell Matt Atwell - 4 months ago 19
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.

app.component.ts

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 { }


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'];
}

}


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)
];


main.ts

//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
]);


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 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

For other error try this,

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