javascript - Angular 2 - TypeError: Cannot read property 'createMessage' of undefined -

i have following javascript file import angular 2 project without re-writing whole thing in typescript.

when tied correctly following error...

"exception: typeerror: cannot read property 'createmessage' of undefined"

here corresponding files...

applicationapi.js

var myapplication = myapplication || {};  (function(myapplication) {  myapplication.message = function() {     this.m_messagecontents = "new message"; };  myapplication.message.prototype.getapplicationmessagecontents = function() {     return this.m_messagecontents; };  myapplication.systemfactory = (function(){     var factory =             {         createmessage: function() {             return new myapplication.message();         }     };     return factory; }());  }(myapplication)); 

applicationapi.d.ts

declare module "myapplicationapi" {  export interface message {     getapplicationmessagecontents(): string; }  export class systemfactory {     static createmessage(): message; }  } 

strangely can working when applicationapi.js looks following same applicationapi.d.ts file.

applicationapi.js

(function() {  this.message = function() {     this.m_messagecontents = "new message"; };  this.message.prototype.getapplicationmessagecontents = function() {     return this.m_messagecontents; };  this.systemfactory = (function(){     var factory =             {         createmessage: function() {             return new this.message();         }     };     return factory; }());}()); 

any thoughts on else needs added scenario work? not obvious me...

this call coming from...

home.component.ts

import { component, oninit } '@angular/core'; import * myapp "myapplicationapi"; @component({ moduleid: module.id, selector: 'app-home', templateurl: 'home.component.html', styleurls: ['home.component.css'] }) export class homecomponent implements oninit { title: string;  constructor() {} ngoninit() { this.title = myapp.systemfactory.createmessage().getapplicationmessagecontents(); } } 

you're not exporting out of applicationapi.js can't import it. when import * myapp "myapplicationapi"; you're not getting think you're getting.

your first instinct might export myapplication should exporting classes , interfaces, not instances. let angular's dependency injector handle instances.

i'd recommend pattern more this:

applicationapi.ts

import injectable '@angular/core'; // either define message in file or import // if define here, export  @injectable export class api {   static createmessage(): message {     return new message();   } } 

home.component.ts

import api 'applicationapi'; ...   constructor (private api: api) {...} 

and assuming bootstrap call looks bootstrap(homecomponent) should changed be

import api 'applicationapi'; ... bootstrap(homecomponent, [api]); 

this insure every time api injected, it's same instance although may not matter if methods on class static.

.d.ts files used reference typescript compiler saying along lines of "trust me, there's looks , acts this" such when want typescript interface js library. library still has defined somewhere else outside of .d.ts file. nothing put in .d.ts file execute or seen browser. if message defined in .d.ts file can't use new message because @ end of day when javascript running in browser there won't definition message is.