NPM and loading external libraries in angular2 typescript

Question

I am using Ionic2 (Browserify), Typescript with NPM.

I am trying to understand how typescript generates the typescript bundle of code and what is included in it. In some cases my node require files are referenced and in other cases they are not.

What seems to be happening is that in some instances e.g jquery i am forced to add a script tag manually in other cases like lodash these are resolved auto-magically and bundled?

What is determining what is correctly referenced as part of the typescript compilation process and what has to happen outside of the process?

In typescript i am using:

import * as jQuery from 'jquery'; -- need to manually add script tag to index.html

import * as _ from 'lodash'; --do not need to add script tag - this is "automagically" added

See image below - some libraries are loaded others are not from the node_modules folder.

Is there something i am missing or is this use case specific to Ionic platform bundling?

Thanks

Package Json below.

{
  "name": "ionic-conference-app",
  "description": "Ionic Conference App",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^2.0.0-rc.2",
    "angular2-jwt": "^0.1.18",
    "angular2-moment": "^0.8.2",
    "breeze-client": "^1.5.10",
    "es6-shim": "0.35.0",
    "fullcalendar": "^3.0.0-beta",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "momentjs": "^1.1.14",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-tslint": "^5.0.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "run-sequence": "1.1.5",
    "tslint": "^3.10.1",
    "tslint-ionic-rules": "^0.0.3"
  },
  "cordovaPlugins": [
    {
      "locator": "https://github.com/VersoSolutions/CordovaClipboard",
      "id": "com.verso.cordova.clipboard"
    },
    {
      "locator": "https://github.com/apache/cordova-plugin-splashscreen.git",
      "id": "cordova-plugin-splashscreen"
    },
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-whitelist"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]
}

Standard Ionic2 Gulpfile

var gulp = require('gulp'),
    gulpWatch = require('gulp-watch'),
    del = require('del'),
    runSequence = require('run-sequence'),
    argv = process.argv;


/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */


gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');
var tslint = require('ionic-gulp-tslint');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});
gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
  return del('www/build');
});
gulp.task('lint', tslint);

Usually, imports will resolve to modules in node_modules and they will be included in the bundle. Ionic2 has switched back and forth between browserify and webpack. You will need to be very specific regarding the Ionic2 versions (cli, modules, etc.) that you are using. Without knowing the versions, it's hard to say. — cartant
– cartant, Commented Sep 3, 2016 at 10:04
Ionic2 - 11. I guess the question i have is this a Typescript / node issue or a browserify / webpack issue? — Piotr Stulinski
– Piotr Stulinski, Commented Sep 3, 2016 at 10:05
I would say it's the latter. With the amount of change that's happening at the moment, it'll be hard to figure out exactly what's configured for your project. Including your package.json and gulpfile might be useful. — cartant
– cartant, Commented Sep 3, 2016 at 10:10
@cartant added - issue with gulp file is that it just goes to other dependencies.My gut here is that it has something to do with node module resolution but i am not sure where the problem is Typescript not finding the modules or one of the packagers. — Piotr Stulinski
– Piotr Stulinski, Commented Sep 3, 2016 at 10:15
Yeah, I know; a lot of the configuration is buried in Ionic modules. To clarify, you have things working, but are curious as to why some scripts need to be included, right? It's getting late, here; I'll have a quick look at the configuration tomorrow. — cartant
– cartant, Commented Sep 3, 2016 at 10:44

cartant · Accepted Answer · 2016-09-03 23:51:15Z

3

The issue is most likely due to the jQuery import not being used. In such situations, TypeScript won't emit a require call - and without a require call, the jquery module will not make it into the bundle. Instead, you can use this import syntax:

import 'jquery';

There is a discussion regarding this TypeScript feature in this GitHub issue.

answered Sep 3, 2016 at 23:51

cartant

58.6k17 gold badges169 silver badges201 bronze badges

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

7 Comments

cartant Over a year ago

There is nothing unusual in the browserify/tsify configuration, so the scenario I've mentioned in the answer is the only thing that makes sense, to me.

Piotr Stulinski Over a year ago

This is the correct answer and bundling seems to work correctly after i put this in - bizarre and so unexpected.

Benjamin Piette Over a year ago

That was it... jQuery was imported in my component but used only in a third party JS library. Therefore there wre no import generated in the JS bundle, and jQuery was not included. Adding something like $("<div>"); in code for testing made jQuery included in the final bundle.

Rahul_Dabhi Over a year ago

Everyone providing the jquery example. What if we load other js like theme has multiple js files and it's not working in each route update. every time we need to refresh the page to load js files

cartant Over a year ago

@Rahul_Dabhi Instead of asking a question in a comment, it'd be preferable to ask a new question - referencing this one, if you think it's required.

|

Collectives™ on Stack Overflow

NPM and loading external libraries in angular2 typescript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related