How to Include JS file in ionic 3

Question

Im looking for a way to access a variable from external js file which i included in assets/data folder

below is what i tried

placed test.js in assets/data folder

in test.js added variable testvar = "heloo from external js";

added script tag in src/index.html <script src="assets/data/test.js"></script>

in app.component.ts i added this line after imports;declare var testvar: any;

in constructor added this line to log the value console.log(testvar);

result is error : ERROR ReferenceError: testvar is not defined

so, how can i use my js variable in typescript ?

rashidnk · Accepted Answer · 2017-05-23 12:21:12Z

35

This solution only worked for me

Put the import js in src/index.html header tag, before the build/polyfills.js and build/main.js (they are in body tag);

Example : I created a file src/assets/test.js with a var testvar, imported in src/index.html and then in src/app/app.component.ts declared declare var testvar;.

test.js

var testvar = "Hello from external js";

index.html

...
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <script src="assets/js/test.js"></script> //here, not in body
...

app.componet.ts

declare var testvar;

@Component({
   templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  constructor(private statusbar : StatusBar,  splashScreen: SplashScreen) {
   alert(testvar);
...

answered May 23, 2017 at 12:21

rashidnk

4,3023 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3788941 Over a year ago

some suggestions if this doesnt work: Add :any next to "declare var testvar" . Add allowJs:true to your tsconfig.json in the project's directory.

Logan Garland · Accepted Answer · 2017-05-16 15:36:16Z

4

To expand on misha130's answer. You would need to import it into the file you want like this:

import * as test from '../assets/data/test'

This way you have access to the test variable.

console.log(test.testvar);

answered May 16, 2017 at 15:36

Logan Garland

2424 silver badges12 bronze badges

1 Comment

tala9999 Over a year ago

To make it work, add declare var testvar; to app.componet.ts as rashidnk said. Then testvar can be accessed like this: console.log(testvar); Notes that doing this way, there is no need to add test.js to index.html

misha130 · Accepted Answer · 2018-04-10 12:37:43Z

3

Remove it from index.html and use it like this:

import '../assets/data/test';

edited Apr 10, 2018 at 12:37

answered May 7, 2017 at 19:50

misha130

5,7862 gold badges31 silver badges55 bronze badges

7 Comments

rashidnk Over a year ago

the error is gone ? but how to access the varibale ?

rashidnk Over a year ago

console.log(testvar); is undefined

misha130 Over a year ago

The test is now the var, not testvar

rashidnk Over a year ago

your answer is incomplete bro

misha130 Over a year ago

I edited the answer and removed the alias so maybe its less confusing now. You can just console log testvar now

|

tala9999 · Accepted Answer · 2018-04-05 13:37:54Z

This is the solution that works for me on ionic 3.20.0:

Create this file src/assets/data/test.js. In this file declare these variables:

testvar = "Hello from external js"; // notes: there is no var keywork testvar2 = "Hello from external js"; // notes: there is no var keywork var testvar3 = "Hello from external js"; // this will not work
In app.component.ts, add these lines to import the javascript file and declare its variables:

import * as test from '../assets/data/test'; // check correct path declare var testvar: any; // each declaration should be on separate line declare var testvar2: any; declare var testvar3: any;
Now in app.component.ts, you can access those variables like this:

console.log(testvar); // not test.testvar console.log(testvar2); console.log(testvar3); // will be undefined because of the var keywork

Final words: there is no need to add a link to test.js in src/index.html if we are doing like above.

shivam srivastava · Accepted Answer · 2019-11-13 10:55:33Z

None of above solutions worked for me, In first solution js file loads at the time of application loading that's not perfect solution when you have bulk js file.

I was looking for dynamic solution to load the external library and there is library for loading asynchronous JavaScript files. https://www.npmjs.com/package/scriptjs

Install the package:

npm i scriptjs

Then use it anywhere like below:

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

OR

You can simply use the jquery method to append or remove the script tag in your header.

To add .js file, call below line under ngOnInit():

$('head').append('<script async src="assets/js/search.js"></script>');

Remove .js file:

document.querySelector('script[src="assets/js/search.js"]').remove();

Collectives™ on Stack Overflow

How to Include JS file in ionic 3

5 Answers 5

1 Comment

1 Comment

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related