AngularM AngularM - 6 months ago 12
AngularJS Question

App not changing route correctly. How do I get routeConfig working for my app?

My angular 2 typescript app component routes dont seem to work.

When I change to login in address bar it doesnt pull in the html.
It doesnt give a console error either

Here's my code from my app component:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import {Login} from './components/login/login';
import {Home} from './components/home/home';

@Component({
selector: 'my-app',
template: `
<ul>
<li>test</li>
</ul>
`
directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
{ path: '/', component: Home, as: 'Home'},
{ path: '/home', component: Home, as: 'Home'},
{ path: '/login', component: Login, as: 'Login' }
])

export class AppComponent {}


Index

<html>
<head>
<title>Angular 2 QuickStart</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->

<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>

<body>
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="#/">Angular2</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<my-app>Loading...</my-app>
</div>
</div>
</body>

</html>


This is my boot file

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';

import {AppComponent} from './app.component';

import {AuthService} from './services/authService/authService';
import {SocialService} from './services/socialService/socialService';
import {UserService} from './services/userService/userService';
import {OrganisationService} from './services/organisationService/organisationService';
import {NotificationService} from './services/notificationService/notificationService';
import {ApplicationService} from './services/applicationService/applicationService';
import {JobService} from './services/jobService/jobService';
import {MessageService} from './services/messageService/messageService';
import {EmailService} from './services/emailService/emailService';

import {Login} from './components/login/login';
import {Home} from './components/home/home';

import {Environment} from './models/environment/environment';
import {UserProfile} from './models/profile/profile';
import {Organisation} from './models/organisation/organisation';
import {User} from './models/user/user';

bootstrap(AppComponent, [
HTTP_PROVIDERS,
AuthService,
ApplicationService,
EmailService,
SocialService,
UserService,
JobService,
MessageService,
EmailService,
OrganisationService,
NotificationService,
Environment,
Organisation,
Profile,
User,
Home,
Login
]);


This is my config file:

System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));

Answer

The components needs to have a <router-outlet></router-outlet> for the router to be able to add the component defined in the route:

@Component({
  selector: 'my-app',
  template: `
      <ul>
        <li>test</li>
      </ul>
      <router-outlet></router-outlet>
  `
  directives: [ROUTER_DIRECTIVES]
})

ROUTER_PROVIDERS are missing as well

bootstrap(AppComponent, [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
...