How to use a js file in ionic3

Ionic Framework ionic-v3
1

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
2

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

3

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;.

teste.js

var testao = "Hello";

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

app.componet.ts


declare var testao;

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

Here’s an example: https://plnkr.co/edit/Ja0mnwYMCVjmOvbSFnXP?p=preview

4 Likes
4

thank you, im Testing this…

5

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

6

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

7

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.

8

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

1 Like
9

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
10

How did you resolve this problem?

11

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

12

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

13

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

1
1.PNG758Ă—78 4.08 KB

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

14

How to use external javascript widget inside my ionic page.
Example need to include this https://www.fxstreet.com/info/business/economic-calendar 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: "http://calendar.fxstreet.com",
			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',
			culture:'en-US'
		};
	</script>
	<script type="text/javascript" src="http://calendar.fxstreet.com/scripts/mini"></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.

15

It works for me too!! :smiley: