Loading 3rd party library using System.js

OS
Linux Ubuntu 64
Versions.
node: 5.8.0
os: linux x64
Repro steps
Until now, to load 3rd party libraries (like jQuery), I've simply:

added my jQuery reference to the vendorNpmFiles array inside angular-cli-build.json:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'jquery/dist/jquery.min.js',
    ]
  });
};

included a reference in my index.html:

<script src="vendor/jquery/dist/jquery.min.js"></script>

However, after building and serving to production, I see my jquery isn't pulling through (no doubt because system.js hasn't been aware of it). I've been struggling to get the system.js build system to pick up jQuery (even after following these examples). Precisely, what are the modifications I need to make to system-config.js to pick it up?
Thanks in advance.

Something like this in system-config.ts should do the trick.

const map: any = {
  'jquery': 'vendor/jquery/jquery.min.js'
};

/** User packages configuration. */
const packages: any = {
  'jquery':{
    format: 'cjs'
  }
};

You also need to import 'jquery'; in your main.ts file.

Thanks for your responses.

So I tried the above in a new test project. But when serving to production (because my index.html imports seem to be ignored in production), I'm still getting jQuery is not defined errors. I'm not having these issues with moment. I feel I'm missing something really simple.

@StephenPaul

I think I'm having the same issue. The vendor files are not being copied in the -prod build. It's fine in the dev build.
I have configured angular-cli-build.js, and system-config.js properly but none of my 3rd party libs are appearing in vendor/
is that the same for you @StephenPaul ?

@amindunited

@amindunited seems to be the same problem. Which version of CLI are you using?

@StephenPaul

@StephenPaul I'm using 1.0.0-beta.8

I'm using 1.0.0-beta.6. Not sure how to escalate this.

I haven't been able to get to the issue yet, but if you comment out lines 158-160 in 'node_modules/angular2-cli/lib/broccoli/angular2-app.js':

if (loadEnvironment(this.project).production) {
  merged = this._getBundleTree(merged);
}

the files will be copied to the vendor directory.

So, I hate to be that guy, but this is not an issue with the CLI. It doesn't need to be escalated. You need to educate yourself on SystemJS more. You shouldn't have to edit your index.html at all, nor should you have to edit any of the dependencies in node_modules. The CLI uses the SystemJS builder to bundle yours app into one main.js file.

Here is a working repository I created for you with jquery working in prod mode. https://github.com/delasteve/ng2-issue-1204

And here is a link to get going with SystemJS: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

@delasteve

@delasteve you're absolutely right - was a product of system.js ignorance ;). I appreciate your effort. That repo and reference helped.

So, instead of using CDNs, always include everything in the build?

You can use a CDN.

map: {
  "jquery": "https://code.jquery.com/jquery-3.0.0.min.js"
}

@delasteve

@delasteve First off, thanks for making that repo! I forked it and added another js library to show what I'm doing before running 'ng build -prod' fails to copy the files to vendor. jquery, and the polyfills work, but the new library doesn't get copied over. I'm quite stuck on this. I wonder if you would mind having a look?
I have also tried this by following the directions from the wiki for momentjs but that doesn't get copied over either.

I see it in the prod bundle that is created. If you go to the browser console and type watermark, it returns a function.

jQuery has map files associated with it, and those are copied over in production. If watermark had map files (checked dist, it doesn't) or any other asset files (eg. bootstrap with the .css and font files) they would be copied over also.

Looks like you got it working to me.

For now, I'm just running tsd install on my build machine after npm i. It is working fine.

It might be nice to update the docs to include this scenario for including a library which you do not want to download and distribute.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Loading 3rd party library using System.js #1204

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Loading 3rd party library using System.js #1204

Description

Activity

slmyers commented on Jun 25, 2016

delasteve commented on Jun 26, 2016

Memeplexx commented on Jun 26, 2016

amindunited commented on Jun 27, 2016

Memeplexx commented on Jun 27, 2016

amindunited commented on Jun 27, 2016

Memeplexx commented on Jun 27, 2016

amindunited commented on Jun 27, 2016

delasteve commented on Jun 27, 2016

Memeplexx commented on Jun 27, 2016

rkralston commented on Jun 28, 2016

delasteve commented on Jun 28, 2016

amindunited commented on Jun 30, 2016

delasteve commented on Jun 30, 2016

rkralston commented on Jun 30, 2016

angular-automatic-lock-bot commented on Sep 5, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions