Question

在尝试使用angular-route时，我一直遇到相同的喷油器问题。

 angular.js:38 Uncaught Error: [$injector:modulerr]
 http://errors.angularjs.org/1.6.3/$injector/modulerr?
 p0=testApp&p1=Error%3A..2F%2Flocalhost%3A3000%2Fnode_modules%2Fangular%2Fangular.min.js%3A22%3A179)

这是我的index.html： -

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <title>TestCase</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
   <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
   <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
   <link rel="stylesheet" href="styles/app.css" type="text/css">
   <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js">
 </script>
 <script src="/node_modules/angular/angular.min.js"></script>
 <script src="/node_modules/angular-route/angular-route.js"></script>
 <script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
 <script src="app.module.js"></script>
 <script src="header-element/header-element.module.js"></script>
 <script src="header-element/header-element.component.js"></script>
 <script src="footer-element/footer-element.module.js"></script>
 <script src="footer-element/footer-element.component.js"></script>
</head>
<body>
 <header-element></header-element>
  <div>
   <ng-view></ng-view>
  </div>
 <footer-element></footer-element>
</body>

包含显示我所包含元素的代码。 app.module.js如下： -

'use strict';
 angular.module('testApp',[
 'ngRoute',
 'mobile-angular-ui',
 'ngMaterial',
 'headerElement',
 'footerElement',
 'thelaElement'
]);

ThelaElement是一个自定义组件，曾用于ng- 视图。编辑： -

我包含了我为ng-view创建的自定义组件。标题组件和页脚组件是相同的，这就是为什么我将共享其中一个： - header-element如下： -

'use strict';
 angular.module('headerElement',[]).
  component('headerElement',{
  templateUrl : 'header-element/header-element.template.html',
  controller : [
    function HeaderController() {
      this.alternateMenu = true;
      this.navElements = [
      {name : 'Thela', link: 'thela', alt: 'Home'},
      {name : 'xxcv', link: 'xxcv', alt: 'Item 2'},
    {name : 'dfgrt', link: 'dfgrt', alt: 'Item 3'},
    {name : 'Dqwe', link: 'derfe', alt:'Item 4'},
    {name : 'Pasd', link: 'qwe', alt: 'Item 5'},
    {name : 'asdf', link: 'jkhl', alt: 'Contact'}
  ];
  }
]
});

thela-element定义如下： -

'use strict';
 angular.module('thelaElement',[]).
  component('thelaElement', {
  templateUrl : 'thela-element/thela-element.template.html',
  controller : [
  function thelaController() {
    this.link = 'thela';
    this.image1 = 'img/1.png';
    this.image2 = 'img/2.png';
  }
]
});

Answer 1

问题是角度版本与角度材料版本不匹配。我进入了package.json并将版本设置为必要的版本。这有助于解决问题。

AngularJS $喷油器问题

1 个答案: