Angularjs 棱角；“模块不可用”；切换到网页包时_Angularjs_Webpack

Angularjs 棱角；“模块不可用”；切换到网页包时

angularjs webpack

Angularjs 棱角；“模块不可用”；切换到网页包时,angularjs,webpack,Angularjs,Webpack,我的项目正在尝试从纯Javascript脚本切换到webpack。我们有一个html文件game.html，它包含以下内容： <html> ... <script src="bundle.js"></script> ... <div ng-app="visualizerApp" ng-controller="VisualizerController as ctrl"> ... </div

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

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

在切换之前，除了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.

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

编辑：my 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

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

你还没有共享你的网页配置，所以很难说清楚到底发生了什么。Webpack更改脚本加载的动态方式

我还建议使用

angular.bootstrap

来引导应用程序，而不是

ngapp

请尝试以下操作：

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

angular.bootstrap

允许您在应用程序启动时进行管理。不仅仅是当角载荷

它使用angularjs 1.5.6和ES5。

我尝试了你的解决方案，但对我无效。此外，编译后的代码似乎是正确的。我编辑了我的原始帖子并添加了配置文件嗯…我已经创建了一个仅与这些文件隔离的小项目。我在你的网页配置中排除了mapPlugin配置，一切正常。您使用的是哪个版本的webpack、angular和babel？还有其他浏览器控制台错误吗？├── angular@1.6.8 ├── 巴别塔-cli@6.26.0 ├── 巴别塔-loader@7.1.2 └── webpack@3.10.0控制台中还有另一个错误，行

if（$scope.visualizer&&$scope.visualizer.canvas）

抛出

无法读取未定义的@Bary12的属性“visualizer”，这些都是我正在使用的相同版本。我会研究另一个错误。game.html在。/game\u日志中吗？是的。我确实简化了这里的文件结构，但是我所有的路径都是正确的。
<html>
    ...
    <script src="bundle.js"></script>
    ...
    <div id="visualizerApp" ng-controller="VisualizerController as ctrl">
        ...
    </div>
    ...
</html>

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'])
});