Import Class into another Class Component in angular2
<p>I have repeated code in my project.</p>

<p>I separate it from other component to make it much easier and dynamic when changing some value. Unluckily, It doesn't work with me.</p>

<p>Here's what I have</p>

<p><code>Repeated Code: form.ts</code></p>

<pre><code>export class Form {
    constructor(){
        var today = new Date(),
            dd = today.getDate(),
            mm = today.getMonth() + 1,
            yyyy = today.getFullYear();

        if(dd &lt; 10) dd = `0${dd}`;
        if(mm &lt; 10) mm = `0${mm}`;

        today = `${yyyy}-${mm}-${dd}`;

        this.balance.dateTo = today;
    }

    public balance = {
        viewBy: 'Ad1',
        companyUnit: 'DEPED',
        financialYear: '2016',
        clients: 'Dummy Text 1'
    };
}
</code></pre>

<p>In other component such as balance, settlement, etc...</p>

<p>I imported it on the top.</p>

<p>Here's what I have tried:</p>

<pre><code>import { Form } from '../form';   // path is correct

export class BalanceComponent {
    form: Form;                   // I am not sure of it
                                  // this is the place I want to import repeated class
    search_data(balance){
        console.log(balance);
    }
}
</code></pre>

<p>systemjs.config.js</p>

<pre><code>(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      'ng2-pagination': 'npm:/ng2-pagination',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'ng2-pagination': {
        main: 'index.js', defaultExtension: 'js' 
      } 
    }
  });
})(this);
</code></pre>