Import Class into another Class Component in angular2

I have repeated code in my project.

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

Here's what I have

Repeated Code: form.ts

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

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

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

this.balance.dateTo = today;
}

public balance = {
viewBy: 'Ad1',
companyUnit: 'DEPED',
financialYear: '2016',
clients: 'Dummy Text 1'
};
}


In other component such as balance, settlement, etc...

I imported it on the top.

Here's what I have tried:

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


systemjs.config.js

(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': 'npmangular/core/bundles/core.umd.js',
'@angular/common': 'npmangular/common/bundles/common.umd.js',
'@angular/compiler': 'npmangular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npmangular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npmangular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npmangular/http/bundles/http.umd.js',
'@angular/router': 'npmangular/router/bundles/router.umd.js',
'@angular/forms': 'npmangular/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);

Continue reading...