Webpackで構築された角型アプリケーションをロードするときに_angular.angularの定義されていないエラー

Question

Webpackで構築されたAngularJSアプリをブートストラップしようとしています。しかし、次のエラーが表示され、モジュールが設定されていません。

TypeError: _angular.angular is undefined 

私は、生成されたコードの塊の中に掘るとその_angular.angular.moduleが_angular.moduleあるべきよう_angular.angularが

var _angular = __webpack_require__(1); 

var _angularUiBootstrap = __webpack_require__(3); 

_angular.angular.module('app', [_angularUiBootstrap.bootstrap]).constant('_', window._).run(function ($rootScope) { 
    $rootScope._ = window._; 

からそれが見えていることがわかります。おそらく、ブートストラップアングルに間違ったやり方を使ったり、誤ったウェブパック設定を使ったりしています。ここに私のコードは次のとおりです。

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var srcDir = 'static_src'; 
var outputDir = 'static'; 

module.exports = { 
    devtool: 'source-map', 
    debug: true, 
    entry: { 
    app: path.resolve(srcDir, 'app.js') 
    }, 
    output: { 
    path: outputDir, 
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].map', 
    chunkFilename: '[id].chunk.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.less', '.css'], 
    alias: { 
     npm: __dirname + '/node_modules' 
    } 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015'], 
      plugins: ['syntax-decorators', 'ng-annotate'] 
     }, 
     exclude: /node_module/ 
     }, 
     { test: /\.less$/, loader: 'to-string!css!less' }, 
     { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 
     { test: /\.(png|gif|jpg)$/, loader: 'file?name=images/[name].[ext]' } 
    ] 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new ExtractTextPlugin('[name].css') 
    ] 
}; 

app.js

import { angular } from 'angular'; 
import { bootstrap } from 'angular-ui-bootstrap'; 

angular.module('app', [bootstrap]); 

私は角1.5.0およびWebPACKの1.12.14を使用しています。

ありがとうございます。

Answer 1

エラーはrequireステートメントにあります。あなたは

import { angular } from 'angular';

を使用しているこれは、エクスポート角度モジュールの内部角度変数があることを意味します。 何を使用することは

import angular from 'angular';

はそれをしようとしています。