Control order of script loading

[mrchops1024]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please
   angular-cli: 1.0.0-beta.5
   node: 6.2.0
   os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

Trying something simple such as using bootstrap, which requires jquery. The only way I can get it to work properly is to explicitly load them in order via script tags in my index.html. Otherwise bootstrap seems to always finish loading first, throwing an error since jquery isn't loaded yet.

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/jquery.js',
      'bootstrap/dist/**/*'
    ]
  });
};

system-config.ts (user config)

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery',
  'bootstrap': 'vendor/bootstrap'

};

/** User packages configuration. */
const packages: any = {
  'jquery': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'dist/jquery.js'
  },
  'bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'dist/js/bootstrap.js'
  }
};

admin.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AdduserComponent } from './adduser/';
import { Routes , ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
import 'jquery';
import 'bootstrap';
...

1. The log given by the failure. Normally this include a stack trace and some
   more information.

zone.js:461 Unhandled Promise rejection: Error: Bootstrap's JavaScript requires jQuery

When debugging in chrome and sorting 'Timeline - Start Time' I see this:

Sorting 'Tiimeline - End Time':

Am I missing something fundamental here? I'd like to avoid loading via script tags and utilize bundling, but I can't seem to figure out how to make this seemingly simple functionality work. I already ripped angular-material out of the project because of errors using -prod (looks like there are a few open issues for similar issues). Didn't expect bootstrap/jquery to also give me grief.

[filipesilva]

Since it's being loaded via SystemJS, you have to tell it that bootstrap depends on jquery. This stack overflow answer seems to cover it well: http://stackoverflow.com/a/35182360/2116927

[sharpmachine]

Hi @filipesilva. I'm having the exact same problem. I looked at the stack overflow issue. So loading it the System.Config, is that instead of using map and packages in the User Configuration section of the system-config.ts file? That seems weird...like if you're using a plain JS library set it up in map and packages, but if you're using a jQuery lib set it up in System.config? That's odd...right?

[mrchops1024]

For the record, this is how I resolved it:

system-config.ts

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery/dist/jquery.js',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js'
};

/** User packages configuration. */
const packages: any = {

};

const meta: any = {
  'bootstrap': {
    deps: ['jquery']
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
...

// Apply the user's configuration.
System.config({ map, packages, meta });

Then in my main app compoent:

import 'bootstrap';

Not sure if this is the best way but it works...

[sharpmachine]

thanks @mrchops1024. That worked for me too.

[mrchops1024]

Well, doesn't seem to work with -prod. I assume it's a problem with bundling.

[mrchops1024]

Ok, so I was expecting this to work, but it loads bootstrap and never loads jquery:

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery',
  'bootstrap': 'vendor/bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'jquery': {
    format: 'global',
    defaultExtension: 'js',
    main: 'dist/jquery'
  },
  'bootstrap': {
    format: 'global',
    defaultExtension: 'js',
    main: 'dist/js/bootstrap.js'
  }
};

const meta: any = {
  'bootstrap': {
    deps: ['jquery']
  }
}

This is what I ended up with that actually works for serve/build with prod. I couldn't really tell you why though. Notice that I had to provide the full path for bootstrap in map, and specifically exclude the defaultExtension and main properties for the bootstrap package. I also had to set both packages to global.

system-config.ts

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js'
};

/** User packages configuration. */
const packages: any = {
  'jquery': {
    format: 'global',
    defaultExtension: 'js',
    main: 'dist/jquery'
  },
  'bootstrap': {
    format: 'global',
  }
};

const meta: any = {
  'bootstrap': {
    deps: ['jquery']
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
...

// Apply the user's configuration.
System.config({ map, packages, meta });

Then in my main app compoent:

import 'bootstrap';

This also works (since it irritated me to have the two packages configured differently):

const map: any = {
  'jquery': 'vendor/jquery/dist/jquery.js',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js'
};

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

const meta: any = {
  'bootstrap': {
    deps: ['jquery']
  }
}

[sharpmachine]

Hecka wonka-wonk.

[angular-automatic-lock-bot]

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.}