Тип машинописного/eS5-ES6 не набирается

Question

Я не знаю, что случилось, поскольку я новичок в Angular2, машинописных, es5 и es6. Посмотрите на plnkr. Я не понимаю, почему мой FirstComponent не получает вызов, написанный в файле first.ts.

У меня следующий осуществление.

app.ts

import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2' 
import {FirstComponent} from 'first' // please explain what should be here. 'first','./first' or something else? 
@Component({ 
    selector: 'my-app', 

template:"<div>{{title}}</div>" 
}) 
class AppComponent { 
    obj:Array<string>; 
    constructor(){ 
    this.title="Hello Angular2 !"; 
    } 
} 

bootstrap(AppComponent); 

first.ts

export class FirstComponent{ 
    constructor() { 
    console.log("First Component being called"); 
    } 
} 

config.js

Примечание: я не понимаю общую роль добавления конфигурации. js-файл.

System.config({ 
    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    //map tells the System loader where to look for things 

    //packages defines our app package 
    packages: { 
    app: { 
     main: 'app.ts', 
     defaultExtension: 'ts' 
    }, 
    services: { 
     defaultExtension: 'ts' 
    }, 
    } 
}); 

Answer 1

Чтобы иметь возможность создавать и использовать FirstComponent, вы должны его украсить. Это означает, что вы добавляете @Component над классом FirstComponent, он сообщает Angular, чтобы добавить к нему метаданные.

first.ts:

@Component({ 
    selector: <f-comp></f-comp>, // Here specify a CSS selector used to create the FirstComponent component. 
    template: ` 
    <p>This is the first component</p> 
    ` 
}) 
export class FirstComponent { 
    ... 
} 

Чтобы быть создан, Вы должны вызвать FirstComponent внутри файла app.ts.

app.ts:

@Component({ 
    directive: [ FirstComponent ], // Here you tell Angular that you are going to use FirstComponent. 
    ... 
    template: ` 
    ... 
    // here you must put the FirstComponent CSS selector --> <f-comp></f-comp> 
    ` 
}) 

создать plnkr, где я объясняю каждые шаги и как они работают. http://plnkr.co/edit/CKZ2l9WqMljXM1FO0IoF?p=preview