How to use a js file in ionic3

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

here 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 file in typescript ?

1 Like

Is it really a JS file with some code or just a JSON with a data structure?

Hello @rashnk, I tried here and works.
Put the import js in src/index.html header tag, before the build/polyfills.js and build/main.js (they are in body tag);

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


var testao = "Hello";


  <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/teste.js"></script>


declare var testao;

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

Here’s an example:


thank you, im Testing this…

Im wrking on a dictionary app. so at this moment its json only, total size exceeds12mb, so cant use with typescript due to memory error, so i planned to do it as external js file

This worked, so the problem due to file was below main.js ?

Cool, yes, the main.js is generated after ionic’s build, so, the error: ERROR ReferenceError: testvar is not defined occurred because testvar was run before includes test.js.

You can add your answer there too, it will be helpful for others

1 Like

hi, i have a similar question i would be really thankful if you could answer me. suppose i have a javascript file in assets folder that i wanna use that file in one my pages as <script src="assets/..."> </script>. Now i want to use it not in index.html but in one of my pages.html. how can i do that? is it possible?
as you know the pages don’t have header tag anymore…can i add it to page.ts or what?

1 Like

How did you resolve this problem?

it is still a problem…i couldn’t find anything yet

I’m unable to use an external js file calling jquery (added using npm install jquery): “$ is not defined”

You just need to add the path of your .js file into src/index.html below <script src="cordova.js"></script> like this:

Then declare in .ts file where you want to use, example I declare it like this:
Now you can use your .js file

How to use external javascript widget inside my ionic page.
Example need to include this widget inside my ionic page. This is not working except home page.
I have added the below code inside the src/index.html

<script type="text/javascript">
		var fxcalendar_config = {
			host: "",
			css: 'mini',
			rows: 7,
			pastevents: 0,
			hoursbefore: 1,        
			timezone: 'India Standard Time',
			showcountryname: 'true',
			columns: 'date,time,country,event,previous,volatility,actual',
			isfree: 'true',
			countrycode: 'JP:EMU,UK,US',
	<script type="text/javascript" src=""></script>

Then added this below code in pages/globaldata.html
<div id="fxst_calendar" class="last-table" style="position: relative; width: 100%; overflow: auto; margin-bottom: 10px;"></div>

But not working in the inner pages. but only working in home page. Any one can help on this.

It works for me too!! :smiley: