angular - Angular2 Typescript komponent laddningshandledning/felsökning?

Jag använder Angular-CLI och arbetar med ES6-moduler och imports för första gången och har svårt att förstå dem. Jag startade helt enkelt ett nytt projekt med 'ng new Angular2Facebook' och sedan 'ng g component Login'. Det skapade denna struktur:

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

Jag kom äntligen på att använda en relativ sökväg till komponenten för att importera mina egna komponenter för att undvika kompilationsfel:

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

Eftersom jag inte längre får kompilatorfel är jag ganska säker på att det är rätt plats, men <login> i min angular2-facebook-vy ersätts inte med mallen. Faktum är att den genererade login.js inte körs. Om jag går till min huvudapp.ts-fil och importerar den händer fortfarande ingenting. Om jag lägger till detta:

console.dir(new Login());

Då kan jag se att filen är laddad eftersom 'exported class "Login"' visas i konsolen, men fortfarande ersätts inte taggarna av mallen. Här är 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"');

Och angular2-facebook.ts som alltid körs:

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

Och angular2-facebook.html som binds av Angular, men som inte har inloggningen av facebook-test1-taggar som ersätts:

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

<login>Inside login tags</login>

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

Det jag verkligen skulle vilja ha är någon sorts handledning eller bok som jag kan läsa för att förstå vad som händer under huven så att jag själv kan felsöka dessa saker, jag förstår bara inte varför det inte skulle använda min komponent. Om jag sätter <login>Laddar...</login> på HTML-sidan istället för Facebook-appkomponenten och startar den, visas det korrekt:

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

Svar #1

Lägg till Login-komponenten i din lista över Directives i din Angular2FacebookApp-komponent.

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

Detta säger åt Angular att ersätta <login>-taggen med en instans av din komponent.

Utan detta vet inte Angular att det behöver ersätta denna tagg.

Svar #2

I denna länk till Angular2-webben https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# kan du se att lägga till directives: [...ClassName] inuti @Components till exempel:

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

du kan titta på filnamnet app.appcomponet.ts för mer information, förhoppningsvis hjälpsamt.