वेबपैक के साथ कोणीय और स्थानीय फोरम का उपयोग

Question

मैं angular, localForage और angular-localForagewebpack के साथ इकट्ठा करने की कोशिश कर रहा हूं। , की आवश्यकता होती है मेरी फाइल इस तरह दिखता है

// Angular libs 
require('../bower_components/angular/angular.min.js') 
require('../bower_components/angular-resource/angular-resource.min.js') 
require('../bower_components/angular-ui-router/release/angular-ui-router.min.js') 
require('../bower_components/angular-bootstrap/ui-bootstrap.min.js') 
require('../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js') 

require('../bower_components/localforage/dist/localforage.min.js') 
require('../bower_components/angular-localforage/dist/angular-localForage.js') 

angular-resource, angular-ui-router और ui-bootstrap ठीक काम किया, लेकिन जब मैं आवश्यकता angular-localForage चीजें जटिल पाने के लिए शुरू कर दिया। मेरे webpack.config.js दिखता है इस तरह,

var path = require('path') 

module.exports = { 
    entry: "./src/app/app.js", 
    output: { 
     path: './src/assets', 
     filename: "bundle.js", 
     publicPath: 'assets/' 
    } 
    , module: { 
     loaders: [ 
      {test: /\.less$/, loader: "style!css!less"}, 
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} 

     ] 
    } 
    , resolve: { 
     root: [ path.resolve('./src/bower_components') ] 
     , moduleDirectories: ['./src/bower_components'] 
    }  
}; 

जब मैं अनुप्रयोगों को चलाने, कंसोल पर मैं यह त्रुटि

Uncaught TypeError: Cannot read property 'module' of undefined 

कौन सा angular-localForage कोड की पंक्ति 1 में होता है

'use strict'; 

1: var angularLocalForage = angular.module('LocalForageModule', ['ng']); 
2: angularLocalForage.provider('$localForage', function() { 
3: var lfInstances = {}, 

इस साधन को देखने के कि angular उस दायरे में प्रवेश नहीं कर रहा है। मैंने imports-loader और exports-loader के साथ कोई सफलता नहीं की है।

कोई विचार यह कैसे किया जाना चाहिए?

Answer 1

ऐसा इसलिए होता है क्योंकि कोणीय-स्थानीय फोरेज "यह" वैश्विक क्षेत्र (खिड़की) होने की अपेक्षा करता है।

require("imports?this=>window!angular-localforage/dist/angular-localForage.js") 

इस कोड को आयात-लोडर NPM मॉड्यूल पर निर्भर करता है इसलिए चलाएं:

npm install imports-loader 

मैं भी इसे सही ढंग से localforage को हल करने के लिए webpack के लिए कुछ config को शामिल किया है मैं इसे कोड के साथ काम बना दिया है:

var path = require('path') 

    module.exports = { 
     entry: "./app.js", 
     output: { 
      path: './', 
      filename: "bundle.js", 
      publicPath: '/' 
     } 
     , module: { 
      loaders: [ 
       {test: /\.less$/, loader: "style!css!less"}, 
       {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
       {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
       {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
       {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
       { 
        include: [ 
         path.resolve(__dirname, "bower_components/localforage") 
        ], 
        //Export localforage var 
        loader: 'exports-loader?localforage' 
       } 
      ] 
      //Don't parse 'require' inside localforage because wepack can't resolve it coorectly 
      , noParse: /localforage\./ 
     } 
     , resolve: { 
      root: [ path.resolve('./bower_components') ] 
      , moduleDirectories: ['./bower_components'] 
      , alias: { 
       //Make webpack to load compiled version, not source. 
       'localforage': 'localforage/dist/localforage.js' 
      } 
     } 
    }; 

तुम भी localforage की आवश्यकता के लिए मैन्युअल रूप से इसे जब कोणीय localForage पार्स किया जाएगा जोड़ दिया जाएगा जरूरत नहीं है।