Question

我的项目正在尝试从纯Javascript脚本切换到webpack。我们有一个html文件game.html，其中包含以下内容：

<html>
    ...
    <script src="bundle.js"></script>
    ...
    <div ng-app="visualizerApp" ng-controller="VisualizerController as ctrl">
        ...
    </div>
    ...
</html>

在切换到webpack之前，我们只有很长的脚本列表。

角度模块在文件app.js

中创建

import angular from 'angular';

class VisualizerController {...}

VisualizerController.$inject = ['$scope', '$rootScope'];

angular.module('visualizerApp', []).controller('VisualizerController', VisualizerController);

在切换之前，除了import语句之外，文件是相同的。

打开html文件时，我们在控制台中收到错误：

[$injector:modulerr] Failed to instantiate module visualizerApp due to:
Error: [$injector:nomod] Module 'visualizerApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

为什么会发生这种情况，我该如何解决？

编辑：我的webpack.config.js

const path = require('path');
const mapType = require('./root/visualizer/js/map/PluginManager').mapType;


module.exports = {
    entry: './plugins/root/visualizer/js/main.js',
    output: {
        filename: '../game_logs/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /tests/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env']
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            mapPlugin: path.resolve(__dirname, 'map/' + mapType),
        }
    }
};

库版本：

├── angular@1.6.8
├── babel-cli@6.26.0
├── babel-loader@7.1.2
└── webpack@3.10.0

Answer 1

看起来像是加载角度而不是你的其他脚本。我首先看看bundle.js，以确保你所期望的那里实际存在。

您还没有分享您的网络包配置，因此很难明确说明发生了什么。 Webpack改变了脚本加载方式的动态。

我还建议您使用angular.bootstrap来引导您的应用而不是ng-app。

尝试以下方法：

<html>
    ...
    <script src="bundle.js"></script>
    ...
    <div id="visualizerApp" ng-controller="VisualizerController as ctrl">
        ...
    </div>
    ...
</html>

在你的Javascript中：

import angular from 'angular';

class VisualizerController {...}

VisualizerController.$inject = ['$scope', '$rootScope'];

angular
    .module('visualizerApp', [])
    .controller('VisualizerController', VisualizerController);

angular.element(document).ready(function() {
    let container = document.querySelector('#visualizerApp');
    angular.bootstrap(container, ['visualizerApp'])
});

angular.bootstrap允许您管理应用程序何时被引导。不仅在角度载荷时。

Here's a working fiddle使用angularjs 1.5.6和ES5。

切换到webpack时，角度“模块不可用”

1 个答案: