Develop Reference

Attempting to load a JavaScript sdk into an Angular2 application. Can't find all dependencies

I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.

Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.

require is not defined at npm.js:2

Forgive me if this is something simple as my research has come up empty in regards to this specific issue. I am using Bootstrap the most recent release. I have noticed that there is a file that is new from previous releases called npm.js. I am hosting all the Bootstrap files locally on my hosted web server. I call the file like all the others in the head to the full path to the file. In the console I have this error.
npm.js:2 Uncaught ReferenceError: require is not defined
at npm.js:2
Which is referring to this line.
require('../../js/transition.js')`
Which is from this npm.js file that is in the newest Bootstrap
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
I am unfamilar with this so I am not sure why I am getting this error but, how can I surpress this error and fix this issue? Do I even need this file? From what I understand if I am using modals or tooltips etc I need this. Is this correct?

You will need to download/config the missing libraries or requires. I am not sure which libraries you are using.
You can add the missing libraries to your package.json. Then call for npm install.

Angular2 - require module on client side

In the context of a Node.js / Express / Angular2 / typescript (IDE=Visual Studio) app, I am trying to load a third party .js utility (packery) onto the client side (for use in a directive). Someone made typescript definitions for it. The d.ts file looks like:
declare module "packery" {
interface PackeryOptions { stuff... }
class Packery { stuff .... }
export = Packery;
}
I refer to this d.ts file, tell the browser where the .js packery script lives, and then import the module as such:
import Packery = require('packery');
This compiles without complaint. However, upon running, the browser attempts (and fails) to find "packery" at http://localhost/packery as opposed to knowing packery is an imported library. This is in contrast to the other import statements I have made on the client such as:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
which work - as far as I can tell the only two pieces of information I gave it for those were also a d.ts file and the location of the .js file, just like packery. But, I must be missing something. Have tried many combinations of file locations and linking and can't get it to work. How can I get the proper linking to "packery"?
Thanks!

I found a workaround for this and thought I'd post in case it helps anyone, although I am still having difficulty with the setup posed in the original question, that is, getting statements of the type:
import foo = require('foo')
to run on the CLIENT side. These work for me in node.js on the server, but on the client, for third party libraries that have been loaded via a script tag, I cannot get it to work, even if I add mapping entries to the system.js config file, irrespective of if I point to a .js file or a d.ts file.
Anyway, what does work is if you load the library using the script tag, then in your IDE put a reference path as such at the top of the CLIENT side code
/// <reference path="foo.d.ts" />
and ensure that your d.ts file does not declare a module/namespace but rather exports methods etc. directly. This lets the IDE compile without complaint, and the client side code is able to access the third party library.
However, I'm not sure if it is preferable / best practices to do what I did or if one should be configuring System.js somehow.

Typings are empty definitions of js libraries that aren't written in a typed language. They are only useful in development for IDEs hints and stuff, in your app, you'll still use the library as you normally would, adding the js file in your index.html or w/e you load your js files from.

Can not include jade file

I run Jade and Backbone, rendering with .html(). All template files are loaded using RequireJS and the jade! directive (example, jade!/templates/test.jade). In test.jade I have a Jade include-statement,
include test2
test2.jade is placed under template. When trying this I get an error in the browser (tried in Chrome),
Uncaught Error: failed to require "fs"
Anyone recognizing this problem? I tried to implicitly load test2.jade using the jade! directive, but I keep getting the same error.

I have just had this issue with require-jade plugin, which it sounds like you're using.
It turns out that it doesn't support extends or includes in the templates.

fs generally refers to the filesystem.
Make sure your app.js or server.js file (whatever your main Node entry point file is) includes a line like this:
var fs = require('fs');
If it is included, make sure it is required before jade.

Why can't my Titanium build app find a module even though it's clearly there?

I'm trying to use the sculejs module that I downloaded with GitHub. It seems like the com.scule.js-file should be placed in the same folder as app.js, according to the provided example. But the most recent versions of Titanium (I think) don't use that structure.
Here is what I add to the index.js-file located under app/controllers:
var scule = require('com.scule.min');
This results in the emulator giving me "Application Error Couldn't find module: com.scule.min."
Here is what my app's folder system looks like:
Anyone know what's wrong? Or maybe can push me in the right direction to get it to work?
Thanks

There should only be controllers in the controllers directory. So you should remove all but index.js.
Next, create a lib directory and put your commonjs libraries there. Also, remove com.scule.min.js from the app directory.
It's important to use the correct directory structure in Alloy. Otherwise, your files will be ignored.

Use This:
var scule = require('/controllers/com.scule.min');

This may be a little late for your needs - but I thought I'll just put an answer here anyway for others to see.
It seems you are using "Alloy" with Titanium - that is good! I am relatively new to Titanium but I am quite sure Alloy is the way to build apps in Titanium.
Within Alloy you need to put all your CommonJS libraries in a "lib" folder which is at the same level as controllers, views and styles. Create the folder if it does not already exist.
Once you have put your com.scule.js (which I use) - or com.scule.min.js in the "lib" folder then you can easily include it in the other modules (e.g. your controller or another of your own libraries in the lib folder). Just write:
var scule = require('com.scule') // Basically, the file name without the last ".js"
I don't know if your problem could be related to 'com.scule.min.js'? I haven't tried that - but I use 'com.scule.js' in my current app ;-)
/John