角度错误:$injector:模块rr模块错误

angular Error: $injector:modulerr Module Error

本文关键字：模块 错误 rr injector      更新时间：2023-09-26

我正在尝试运行一个角度材料示例，但对于我的生活，我无法弄清楚为什么我会收到此错误。

我得到的错误是Error: $injector:modulerr Module Error

这是我收到的错误报告：链接

任何想法可能是什么问题？我实际上是从他们的示例网站复制粘贴的。

这是代码： 

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope) {
});
.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }
.buttondemoBasicUsage md-content {
  margin-right: 7px; }
.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }
.buttondemoBasicUsage .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <md-content>
    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
      <md-button class="md-icon-button md-primary" aria-label="Settings">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button class="md-icon-button md-accent" aria-label="Favorite">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button href="http://google.com" title="Launch Google.com in new window" target="_blank" ng-disabled="true" aria-label="Google.com" class="md-icon-button launch">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <div class="label">Icon Button</div>
    </section>
  </md-content>
</div>
<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

很可能

你缺少svg图标

<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>

更改模块脚本以删除对 material.svgAssetsCache 的引用，演示将运行，但没有最后一行按钮 - 这些按钮引用"本地"图像资源。

如果你拿一个图标的副本（bower install material-design-icons）并找到相关的24px.svg文件，然后从网站的根目录（比如）/img/icons/中弹出它们（根据需要调整文件名和路径），那么即使是这个部分也可以正常工作。

当您考虑它时，该演示相当令人反感，因为它很可能被选为尝试事物的第一针，但它只能在 CodePen 沙盘中工作。

您是否引用了与您的 angular 应用程序相关的.js文件？我只能看到外部 javascript 依赖项，但与您的应用程序 - 控制器无关。注意导入它的顺序

您需要添加：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
相关文章：