Angular 2 Component not displaying

Question

I have the following component, which when my router routes to, I get the following screen:

Here is the component:

import { Component } from 'angular2/core';
import { Router } from 'angular2/router';
import { UserService } from '../services/user.service';

@Component({
  selector: 'login',
  template: 'client/dev/user/templates/login.html',
  styleUrls: ['client/dev/todo/styles/todo.css'],
  providers: []
})
export class LoginComponent {
  constructor(
    private userService: UserService, 
    private router: Router
  ) { }

  onSubmit(email, password) {
    this.userService.login(email, password).subscribe((result) => {
      if (result) {
        this.router.navigate(['Home']);
      }
    });
  }
}

Why isn't this rendering properly?

NB: If I change the route to use a different component, it works fine, so I think it is this specific component, or possibly some dependancy issues.

Answer 1

You need to use templateUrl instead of template in the Component decorator:

@Component({
  selector: 'login',
  templateUrl: 'client/dev/user/templates/login.html', // <-----
  styleUrls: ['client/dev/todo/styles/todo.css'],
  providers: []
})
export class LoginComponent {
  (...)
}