Angular2 Typescript component loading tutorial/debugging?

Question

I'm using Angular-CLI and working with ES6 modules and imports for the first time and I'm having a hard time understanding them. I basically started a new project with 'ng new Angular2Facebook' then `ng g component Login'. That created this structure:

dist
  app
    components
       login
node_modules
src
  app
    components
      login
        login.ts
   angular2-facebook.ts
app.ts

I finally figured out to use a relative path to the component for importing my own components to avoid compile errors:

import {Login} from './components/login/login'; // error

Since I no longer get compile errors, I'm pretty sure it's the right place, but the <login> in my angular2-facebook view is not getting replaced with the template. In fact, the generated login.js is not being executed. If I go to my main app.ts file and import it, still nothing. If I add this:

console.dir(new Login());

Then I can see the file is loaded because 'exported class "Login"' is displayed in the console, but still the tags don't get replaced by the template. Here's Login.ts:

import {Component} from 'angular2/core';

@Component({
    selector: 'login',
    //templateUrl: 'app/components/login/login.html',
    template: '<h1>LOGIN TEMPLATE</h1>',
    styleUrls: ['app/components/login/login.css'],
    providers: [],
    directives: [],
    pipes: []
})
export class Login {
    constructor() {
        console.log("Login constructor()");
    }
}

console.log('exported class "Login"');

And angular2-facebook.ts which is always ran:

import {Component} from 'angular2/core';
import {Login} from './components/login/login';
import {FacebookTest1} from './components/facebook-test1/facebook-test1';

@Component({
    selector: 'angular2-facebook-app',
    providers: [],
    templateUrl: 'app/angular2-facebook.html',
    directives: [],
    pipes: []
})
export class Angular2FacebookApp {
    defaultMeaning: number = 42;

    meaningOfLife(meaning) {
        return `The meaning of life is ${meaning || this.defaultMeaning}`;
    }
}

console.log('ran angular2-facebook.ts');

And angular2-facebook.html which is getting bound by angular, but which doesn't have the login of facebook-test1 tags being replaced:

<p>
{{meaningOfLife()}} ({{defaultMeaning}})
</p>

<login>Inside login tags</login>

<facebook-test1>Inside facebook-test1 tags</facebook-test1>

What I would really like is some kind of tutorial or book I could read to understand what is going on under the hood so I could debug these things myself, I just don't understand why it wouldn't be using my component. If I put <login>Loading...</login> in the html page instead of the facebook app component and bootstrap it, it displays fine:

//bootstrap(Angular2FacebookApp);
bootstrap(Login);

Answer 1

Add the Login component to your list of Directives in your Angular2FacebookApp component.

@Component({
  selector: 'angular2-facebook-app',
  providers: [],
  templateUrl: 'app/angular2-facebook.html',
  directives: [Login],
  pipes: []
})

This tells angular to replace the <login> tag with an instance of your component.

Without this angular doesn't know that it needs to replace this tag.

Answer 2

In this link of Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# you can see that adding directives: [...ClassName] inside of @Components for example:

import {Component} from 'angular2/core';
import {Login} from './components/login/login';
import {FacebookTest1} from './components/facebook-test1/facebook-test1';

@Component({
    selector: 'angular2-facebook-app',
    providers: [],
    templateUrl: 'app/angular2-facebook.html',
    directives: [Login],
    pipes: []
})
//Rest of code

you can watch the file name app.appcomponet.ts for more details, hopefully help.