typescript/eS5-ES6 module is not getting called

Question

I don't know what's wrong as I'm new in Angular2,typescript,es5 and es6. Look at plnkr. I don't understand why my FirstComponent is not getting called written in first.ts file.

I have following implementation.

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

Note: I don't understand overall role of adding config.js file.

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

To be able to create and use FirstComponent you must decorate it. It means that you add @Component above the FirstComponent class, it will tell Angular to add meta-data to it.

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 {
  ...
}

To be created you must call the FirstComponent inside the app.ts file.

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>
  `
})

I create a plnkr where I explain every steps and how they works. http://plnkr.co/edit/CKZ2l9WqMljXM1FO0IoF?p=preview