Using external js file in angular 6 component

Question

I am trying to use a js file into my angular 6 application. Steps I followed are as follows:

1. Created testfile.js file:

var testa = function () {
   function testMethod() {
        console.log('hello');
    }
}
var testmodule = new testa();
module.exports = testmodule;

2. In angular.cli.json. For testing purpose tesfile.js is at the same location as angular.cli.json is:

 "scripts": [
              "testfile.js"
            ],

3. In typings.d.ts file, declared it:

declare var testmodule: any;

4. In ts file, tried to use it as:

 public ngOnInit() {
        testmodule.testMethod()
    }

But when angular component is used, warning in console is:

Uncaught ReferenceError: testmodule is not defined

I tried another alternative, like importing js file inside .ts file as:

1. import * as mymodule '../../testfile.js'
2. "allowJs": true but this is also not identifying testmodule or testfile.

What wrong am I doing here?

Solution 1

I made a demo: https://codesandbox.io/s/4jw6rk1j1x , like so:

testfile.js

function testa() {}
testa.prototype.testMethod = function testMethod() {
  console.log("hello");
};
var testmodule = new testa();

export { testmodule };

And in the main.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

import { testmodule } from "./testfile";

testmodule.testMethod();

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));

You can see on the console tab the 'hello' text

Note that I made some changes in the testfile.js

Solution 2

Give Reference to your scripts inside the angular-cli.json file.

"scripts": [
    "../path_of_script" 
 ];

then add in typings.d.ts

declare var testModule : any;

Import it where you want to use it

import * as myModule from 'testModule';

Solution 3

You can import your external JS in angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "../../../assets/js/counter"
            ]

If you want to import JS file for the specific html component then you can import your js file in your yourComponent.ts

Just Like:

import { Component, OnInit } from '@angular/core';
import "../../../assets/js/counter";

You can see here I have imported counter.js in the specific HTML page.

In this line "../../../assets/js/counter" counter is a js file name. You have no need to add .js after the file name.

Please make sure you set your path carefully ../../..

You can store your all external js files in assets/js folder. And then you can import your specific js file in specific component.ts.

This is working perfectly for me in angular 6.

Comments

[shrekDeep]

Yes, it was typo.

[shrekDeep]

I tried both export default and export { }, but same issue.

[You Nguyen]

@sdeep I made a demo, don't know if it is what you need

[shrekDeep]

Great!! it worked. But didn't get why setting the function into prototype worked.

[You Nguyen]

@sdeep There you go Object.prototype.constructor, I follow this instruction