How `angular2` exports a component?

Question

I am creating a component like this: ( from the sample )

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1> ~ My First Angular 2-0 App By Gulp Automation ~ </h1>'
})

export class AppComponent { } //what it is exporting here?

and importing to another module:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component' //what it's imports here

bootstrap(AppComponent); //it works.

in index.html :

<script>
      System.config({
        packages: {        
          app: {
            format: 'register', //what is means?
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

I am not able to understand the logic behind, any one help me please?

thanks in advance.

Answer 1

I think that these links could help you: https://angular.io/guide/quickstart and https://daveceddia.com/angular-2-dependencies-overview/.

In fact, SystemJS is responsible to implement the module logic and the link between them. That's why you need to include the SystemJS file (systemjs) in your HTML page and configure it using System.config and finally load the main component of your Angular2 application with System.import.

You explicitly use SystemJs at startup System.import. In other elements of your application, the tool is used implicitly especially if you use TypeScript. In this case, a simple import is enough to import another module. If you have a look at transpiled files (JavaScript files), you will see that SystemJS is used.

The appendix SystemJS Configuration (https://angular.io/docs/ts/latest/quickstart.html#!#systemjs) could give you some hints about the configuration of SystemJS for an Angular2 application

Here is the link to the documentation regarding module formats (the format attribute in the System.config block): https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md. By using the register value for the format attribute, you specify System.register is used to define modules.

Hope it helps you, Thierry

Answer 2

export class AppComponent { } //what it is exporting here?

This is explained (briefly) in the Architecture Overview guide:

export class AppComponent { }

The export statement tells TypeScript that this is a module whose AppComponent class is public and accessible to other modules of the application.

When we need a reference to the AppComponent, we import it like this:

import {AppComponent} from './app.component';

The import statement tells the system it can get an AppComponent from a module named app.component located in a neighboring file. The module name (AKA module id) is often the same as the filename without its extension.