nyks nyks - 6 months ago 463
TypeScript Question

typescript/eS5-ES6 module is not getting called

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download