如何修复“模块不可用！您拼错了模块名称或忘记加载它。”在 AngularJS 中？答案

【问题标题】：How to fix "Module is not available! You either misspelled the module name or forgot to load it." in angularJS?如何修复“模块不可用！您拼错了模块名称或忘记加载它。”在 AngularJS 中？
【发布时间】：2021-05-04 14:41:36
【问题描述】：

我正在尝试将服务导入控制器。报错

angular.js:138 未捕获错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：错误：[$injector:nomod] 模块“app”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

https://errors.angularjs.org/1.7.9/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A2310%3A17%0A%20%20%20%20at%20ensure%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A2231%3A38)%0A%20%20%20%20at%20module%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A2308%3A14)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A5038%3A22%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A5022%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A4939%3A19)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A1962%3A20)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.9%2Fangular.js%3A1983%3A12)
    at angular.js:138
    at angular.js:5062
    at forEach (angular.js:387)
    at loadModules (angular.js:5022)
    at createInjector (angular.js:4939)
    at doBootstrap (angular.js:1962)
    at bootstrap (angular.js:1983)
    at angularInit (angular.js:1868)
    at HTMLDocument.<anonymous> (angular.js:36426)
    at i (jquery.min.js:2)

public/RecordsController.js：

import {Calculator} from './services/calculator' // this line causes error
import {app} from './app.js';

function RecordsController($scope, $http, /*calculator*/)
{
    $scope.submit = function () {
        console.log($scope);
        $http.post( app.baseUrl + 'save', {name: $scope.name, price: $scope.price})
            .then(function (response) {
                $scope.records.push(response.data)
            });
    }

    $http.get(app.baseUrl + 'list')
        .then(function(response) {
            $scope.records = response.data;
        });


    $scope.grade = function(price) {
        if (price > 100) {
            return 'big';
        } else if (price > 50) {
            return 'medium';
        } else {
            return 'small';
        }
    };
}

app.controller('RecordsController', RecordsController);

export {RecordsController};

public/services/calculator.js

import {app} from "../app";
  
function Calculator() {}

app.factory('Calculator', function() {

    return new Calculator();
});

export {Calculator};

我什至不明白如何注册服务。我正在导入 app.js，也许不需要。因为在创建控制器时我正在导入它。但另一方面 - 如何在不导入的情况下访问它。

public/app.js

var app = angular.module('app', []);

app.baseUrl = 'http://localhost:8080/';

app.config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
}]);

export {app};

模板/signel_page.html.twig

 <html>
    
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
        {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>#}
    
        <script type="module" src="RecordsController.js"></script>
    </head>
    
    <body ng-app="app" >
        <div class="container">
            <div ng-controller="RecordsController">
                <h1>Records controller</h1> <br>
    
                <div class="row col-md-4">
                    <form>
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" ng-model="name" id="name">
                        </div>
                        <div class="form-group">
                            <label>Price</label>
                            <input type="number" class="form-control" ng-model="price" id="price">
                        </div>
                        <button type="submit" class="btn btn-primary" ng-click="submit()">Submit</button>
                    </form>
                </div>
    
    
                <table class="table table-bordered">
                    <tr>
    
                        <th>Id</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Size</th>
                    </tr>
                    <tr ng-repeat="(key, record) in records">
                        <td>// record.id //</td>
                        <td>// record.name //</td>
                        <td>// record.price //</td>
                        <td>// grade(record.price) //</td>
                    </tr>
                </table>
    
                <a-great-eye></a-great-eye>
            </div> <!-- end records controller -->
        </div>
    
    </body>
    </html>

package.json

{
  "name": "angular-phonecat",
  "private": true,
  "version": "0.0.0",
  "description": "A tutorial application for AngularJS",
  "repository": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "dependencies": {
    "angular": "1.7.x",
    "angular-animate": "1.7.x",
    "angular-resource": "1.7.x",
    "angular-route": "1.7.x",
    "bootstrap": "3.3.x",
    "jquery": "3.3.x"
  },
  "devDependencies": {
    "angular-mocks": "1.7.x",
    "cpx": "^1.5.0",
    "http-server": "^0.11.1",
    "jasmine-core": "^3.3.0",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-firefox-launcher": "^1.1.0",
    "karma-jasmine": "^1.1.2",
    "karma-webpack": "^4.0.2",
    "protractor": "^5.4.1",
    "webpack": "^4.41.1"
  },
  "scripts": {
    "postinstall": "npm run copy-libs",
    "update-deps": "npm update",
    "postupdate-deps": "npm run copy-libs",
    "copy-libs": "cpx \"node_modules/{angular,angular-*,bootstrap/dist,jquery/dist}/**/*\" app/lib -C",
    "prestart": "npm install",
    "start": "http-server ./app -a localhost -p 8000 -c-1",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "npm test -- --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js"
  }
}

此代码是此代码的延续：How to fix "Cannot use import statement outside a module" when running karma unit test with angularjs?

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你的做法很奇怪...在最简单的设置中 index.html 应该只引用 app.js，所以 app.js 应该导入所有控制器和服务：

app.js：

import {Calculator} from ...
import {Component} from ...
angular.module('app', []).component(...).service(...). ...

组件：

// no imports here

function RecordsController($scope, $http, Calculator) {

}
export {RecordsController};

服务：

// no imports here either

function Calculator() {}

export {Calculator};

【讨论】：

是的，我这样做是因为我没有找到如何测试。我所做的方式 - 我的测试有效，如下所示：stackoverflow.com/questions/65463300/… 所以真的没有其他办法了吗？我需要以某种方式使测试与您所做的设置一起工作？
通常在测试中你不会手动创建控制器（出于某些原因你可以，但不适合初学者）——你应该使用 componentController 调用来创建它。在我给出的设置中，测试应该没有问题。
我现在在想——也许我这样做不是因为测试，而是因为我想从应用程序中获取基本 url。自从我创建这个“架构”以来已经很久了，所以记不太清了。今天以为我可以将 baseUrl 作为依赖项传递给控制器。如果有很多控制器不是很方便，那么也许我应该有一些总是通过 baseUrl 的父控制器。或者创建一些用 baseUrl 装饰 $http 的服务