Loading external javascript files in ionic2

Ionic Framework ionic-v3
1

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 ?

2

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.

3

@grendo I’m a bit late to reply so I guess that you already read this:

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 and 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?

4

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 ?

5

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
// ...
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
<!-- ... -->
  <script src="build/js/external-libaries.js"></script>
<!-- ... -->
  • install the package:
npm install gulp-concat --save-dev
1 Like
6

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.

7

Ok, great, I’m glad you got it working.

8

How did you add bower to the build?

Thanks!

9

Hi,

how can i do this with Ionic 2 RC 0 and ionic-app-scripts?

Thanks for a solution.

3 Likes
10

@scottlott found a solution with ionic-app-scripts

1 Like