Call Angular Component method from an imported library

Question

Here is my Angular component:

import { basketModule } from './wind'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {



    constructor(){
    }

    ngOnInit(){
        basketModule.init()
    }

    public dataMain(){
        alert('hi')
    }
}

Here is the wind.js file which is imported above.

export var basketModule = (function () {

return {

  init: function(){
       dataMain()
    }

}
})();

When I run the above code, it returns an error that

core.es5.js:1020 ERROR ReferenceError: dataMain is not defined

How to access the Angular component method dataMain from the imported library ?

Answer 1

If you're using AngularCLI, you will need to add that file to the scripts section of the angular-cli.json file.

"scripts": [
     // path to script here in quotes
 ],

And regardless of whether you're using angular cli, make sure the 'allowJs' flag in your tsconfig.json file is set to true.

 {
     "compilerOptions": {
       "target": "es5",
       "sourceMap": true,
       "allowJS": true   // this one
   }
}

Then try importing the library in your component

import * as wind from './path/to/lib/wind.js'

Now you should be able to access that libraries functions using the 'wind' name

 wind.dataMain();

Answer 2

If you want an A file methode in a B file so you should import A in B

But you should put your methode in a service and then import service in wind.js