IE11中使用Webpack+AngularJS+Bluebird时Promise未定义问题求助

Hey there! I’ve run into this exact snag before working with Webpack and Bluebird—let’s walk through how to get that global Promise working for your app.

1. Expose Bluebird to the Global Scope #

Webpack wraps all code in module scope by default, so even if you import Bluebird, it won’t automatically attach to the window object. You need to explicitly mount it:

In your app’s entry file (like main.js or app.js), add this right after importing Bluebird:

import Bluebird from 'bluebird';
// Make Bluebird available globally as window.Promise
window.Promise = Bluebird;

Alternatively, use Webpack’s ProvidePlugin to inject Bluebird as Promise across all your modules (this saves you from manually referencing window.Promise everywhere):

// In webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ... your existing Webpack config
  plugins: [
    new webpack.ProvidePlugin({
      Promise: 'bluebird'
    })
  ]
};

2. Configure AngularJS to Use Bluebird #

AngularJS relies on its own $q service, but you can tell it to use Bluebird instead. This keeps consistency between your global Promise usage and Angular’s internal promises:

In your Angular module’s config block:

angular.module('yourAppName', [])
  .config(['$qProvider', function($qProvider) {
    // Tell Angular to use Bluebird as the Promise implementation
    $qProvider.$promiseProvider = Bluebird;
    // Or if you already mounted it to window, you can use:
    // $qProvider.$promiseProvider = window.Promise;
  }]);

3. Double-Check Load Order #

Make sure Bluebird loads before AngularJS in your Webpack entry points. If Angular initializes before Bluebird, it’ll fall back to the browser’s native Promise (which might be missing in older browsers, triggering that "undefined" error).

Rebuild your app after making these changes, and check the dev console—Promise should now be available globally, and your calls won’t throw that error anymore!

内容的提问来源于stack exchange，提问作者Redplane