# Loading external javascript files in ionic2 **URL:** \ **Category:** ionic-v3\ **Created:** [May 4, 2016, 11:31am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161 "2016-05-04T11:31:06Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![grendo](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@grendo](https://forum.ionicframework.com/u/grendo)\ **Post date:** [May 4, 2016, 11:31am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/1 "2016-05-04T11:31:06Z")
Hi, I have read that all you have to do to get an external javascript file loaded in ionic to is npm install [package] --save, then add the typings if available. Seems to work for some javascript files but not others. I have a external file, (gridster and jquery), that I installed with npm and added the typings. Jquery seems to load no problem but not gridster. I tried adding the gridster script manually in the index.html but there seems to be a sequence issue as with gridster you need jquery loaded first. If I add Jquery to the index.html ionic seems to replace jquery by its load process later and gridster is lost. How does ionic2 decide which javascript files to load that were installed with npm and how do you configure it to include a file if it is not loading it ? ---
**Author:** ![grendo](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@grendo](https://forum.ionicframework.com/u/grendo)\ **Post date:** [May 4, 2016, 12:13pm UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/2 "2016-05-04T12:13:16Z")
not sure if this is the best way but I got js files going into the app.bundle.js file by playing with the src property of the browserify command in the gulpfile. I still have a issue with jquery loading in the right order but a bit closer. ---
**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\ **Post date:** [May 4, 2016, 10:49pm UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/3 "2016-05-04T22:49:38Z")
@grendo I’m a bit late to reply so I guess that you already read this: > [@Ionic V2 & npm modules](https://forum.ionicframework.com/t/ionic-v2-npm-modules/50185/2): > > I’ll recommend you to check out the following article: [Ionic 2 and External Libraries](http://mhartington.io/post/ionic2-external-libraries/). You’ll probably have to also customize the build process. Check out the [ionic-gulp-tasks](https://github.com/driftyco/ionic-gulp-tasks) and more precisely [scripts-copy](https://github.com/driftyco/ionic-gulp-tasks/tree/master/scripts-copy). > [@grendo](#): > > How does ionic2 decide which javascript files to load that were installed with npm and how do you configure it to include a file if it is not loading it? I’m not absolutely sure about this, but I guess that it handled by the transpiler. I’ll suggest you to take a look at the tasks [`browserify-typescript`](https://github.com/driftyco/ionic-gulp-tasks/tree/master/browserify-typescript) and [`browserify-es2015`](https://github.com/driftyco/ionic-gulp-tasks/tree/master/browserify-es2015). You could pass options to the transpiler. But when you can configure your `gulpfile.js` as you wish, why don’t you just create a task that combines the files in the required order and produces a single file, which you can just include in your `index.html`? ---
**Author:** ![grendo](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@grendo](https://forum.ionicframework.com/u/grendo)\ **Post date:** [May 5, 2016, 6:43am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/4 "2016-05-05T06:43:48Z")
Problem seems to be jquery gets picked up by browserify but gridster does not, might be because gridster does not have a main tag in its package.json. If I load both files in index.html somehow jquery ends up in the bundle. Was so much easier in ionic 1. Trying out browerfiy-shim, but it can’t be this hard to just add an external js file can it ? ---
**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\ **Post date:** [May 5, 2016, 11:36am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/5 "2016-05-05T11:36:25Z")
> [@grendo](#): > > but it can’t be this hard to just add an external js file can it? It could be harder than it should be, when _using the wrong tool for the job_. Basically you want to ensure that a few scripts are always included and executed in a specific order - why bother wrestling with the transpiler and a complex multistep process instead of just combining the scripts in the desired order and saving them to a single file. As a starting point I would suggest you the following _(disclaimer: untested, but you should get the idea)_: - **gulpfile.js** ```diff // ... gulp.task('watch', ['clean'], function(done){ runSequence( - ['sass', 'html', 'fonts', 'scripts'], + ['sass', 'html', 'fonts', 'scripts', 'extlibs'], // ... gulp.task('build', ['clean'], function(done){ runSequence( - ['sass', 'html', 'fonts', 'scripts'], + ['sass', 'html', 'fonts', 'scripts', 'extlibs'], // ... + var gulpConcat = require('gulp-concat'); + gulp.task('extlibs', function() { + return gulp.src(['/path/to/jquery.js', '/path/to/gridster.js']) + .pipe(gulpConcat('external-libaries.js')) + .pipe(gulp.dest('www/build/js')); + }); ``` - **index.html** ```auto ``` - **install the package:** ```plaintext npm install gulp-concat --save-dev ``` ---
**Author:** ![grendo](https://avatars.discourse-cdn.com/v4/letter/g/94ad74/32.png) [@grendo](https://forum.ionicframework.com/u/grendo)\ **Post date:** [May 15, 2016, 4:58am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/6 "2016-05-15T04:58:14Z")
I worked around this by installing all my external js files using bower so they did not get caught up in the whole browserify/npm/browserify shim bundling, (just keep getting issues trying to stop browserify to ignore some files that were installed with npm like jquery), then added a gulp task to package up the js as you suggested. Works well for me, (although with time I might have been able to get going using browserify shim and npm). Thanks for your help. ---
**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\ **Post date:** [May 15, 2016, 10:54am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/7 "2016-05-15T10:54:55Z")
> [@grendo](#): > > …then added a gulp task to package up the js as you suggested. Works well for me… Ok, great, I’m glad you got it working. ---
**Author:** ![victorcarvalhosp](https://avatars.discourse-cdn.com/v4/letter/v/b782af/32.png) [@victorcarvalhosp](https://forum.ionicframework.com/u/victorcarvalhosp)\ **Post date:** [September 14, 2016, 1:02am UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/8 "2016-09-14T01:02:57Z")
How did you add bower to the build? Thanks! ---
**Author:** ![danielmm1997](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielmm1997/32/85966_2.png) [@danielmm1997](https://forum.ionicframework.com/u/danielmm1997)\ **Post date:** [September 29, 2016, 9:55pm UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/9 "2016-09-29T21:55:44Z")
Hi, how can i do this with Ionic 2 RC 0 and ionic-app-scripts? Thanks for a solution. ---
**Author:** ![danielmm1997](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielmm1997/32/85966_2.png) [@danielmm1997](https://forum.ionicframework.com/u/danielmm1997)\ **Post date:** [October 2, 2016, 12:04pm UTC](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161/10 "2016-10-02T12:04:09Z")
@scottlott found a solution with ionic-app-scripts > [@RC0 Injecting Custom Scripts](https://forum.ionicframework.com/t/rc0-injecting-custom-scripts/65281/3): > > Thanks for the heads up on that pickup man! I have no idea how you found to use the “config” in your package file but it’s working! You put this in the package.json file: "config": { "ionic\_copy": "./copy-libs.js" } And in the root folder of your Ionic project you make a file called “copy-libs.js”, here’s what I put in mine: var fs = require('fs-extra') var dependencies = [['node\_modules/jquery/dist/jquery.min.js','www/libs/jquery.min.js'], ['node\_modules/js-md5/build/m…