Question

我尝试在我的应用中使用angular-ui-router，但在导入时遇到问题

Error: [$injector:modulerr] Failed to instantiate module uiRouter due to:
Error: [$injector:nomod] Module 'uiRouter' 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.

这是我的main.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';

(function() {
    function config($locationProvider, $stateProvider) {
        $locationProvider
            .html5Mode({
            enabled: true,
            requireBase: false
        });

    }
    angular
        .module('myApp', ['uiRouter'])
        .config(config);

})();

我的index.html文件声明了应用 <html lang="en" ng-app="myApp"> 我已经通过npm

安装了这两个软件包

myApp@1.0.0 /Users/.../myApp
├── angular@1.6.5
├─┬ angular-ui-router@1.0.3
│ └── @uirouter/core@5.0.3

不知道它是否相关，但也在package.json

中宣布了它

  "dependencies": {
    "angular": "^1.6.5",
    "angular-ui-router": "^1.0.3",

过去我总是通过<script>中的index.html代码导入角度库，因此我不熟悉导入包。

此外，我在阅读ui-router作为范围包提供：https://ui-router.github.io/blog/uirouter-scoped-packages/但不知道它是否与此相关（我还导入了此处描述的包链接，但似乎没有帮助。）

问题为什么没有angular-ui-router被识别？

Answer 1

好的，我得到了这个，但这不是我最初的预期。

我将main.js更改为

import angular from 'angular';
import uiRouter from 'angular-ui-router';

(function() {
    function config($stateProvider, $urlRouterProvider) {
        /* $locationProvider  //ignore
            .html5Mode({
            enabled: true,
            requireBase: false
        }); */

    }
    angular
        .module('myApp', ['ui.router'])
        .config(config);

})();

解释：这里我使用的是ES6导入功能以及Angular依赖注入。我从'angular-ui-router'通过uiRouter导入，以便main.js可以访问这个ui路由器对象。然后我在Angular依赖注入中使用ui.router，因为这是Angular中ui路由器的内部名称。 ngRoute和ui-router的提供者名称也不同（原始代码中的$locationProvider与此处的$urlRouterProvider相对。）

我根本不使用<script>标签来导入Angular库。

AngularJS：[$ injector：nomod]模块＆＃39; uiRouter＆＃39;不可用

1 个答案: