切换到 webpack 时 Angular “模块不可用”答案

【问题标题】：Angular "Module is not available" when switching to webpack切换到 webpack 时 Angular “模块不可用”
【发布时间】：2018-01-05 16:22:19
【问题描述】：

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

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

在切换到 webpack 之前，我们只有一长串脚本。

Angular 模块在 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

【问题讨论】：

game.html 是否在../game_logs 中？
是的。我确实简化了这里的文件结构，但我所有的路径都是正确的。

标签： angularjs webpack

【解决方案1】：

看起来 Angular 已加载，但您的其他脚本未加载。我将首先查看 bundle.js 以确保您期望的内容确实存在。

你还没有分享你的 webpack 配置，所以很难确定发生了什么。 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 配置中排除了 mapPlugin 配置，一切正常。你使用的是哪个版本的 webpack、angular 和 babel？还有其他浏览器控制台错误吗？
├── angular@1.6.8 ├── babel-cli@6.26.0 ├── babel-loader@7.1.2 └── webpack@3.10.0 还有一个错误控制台，if ($scope.visualizer && $scope.visualizer.canvas) 行抛出 Cannot read property 'visualizer' of undefined
@Bary12 这些是我使用的相同版本。我会调查其他错误。