Search code examples
angularjstypescriptangularangular2-routingrouteconfig

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

  • 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,
...