Question

Heroku构建和部署成功。但是，当我尝试使用提供的网址打开应用时，它会在浏览器中显示此错误

错误：[$ injector：modulerr]由于以下原因无法实例化模块myApp：

和

＆＃34;模块＆＃39; ngMaterial＆＃39;不可用！

让我感到困惑的是，本地一切运行良好而没有任何错误。我确实使用--save加载了Angular Material模块，并在

中包含了必要的脚本

＆＃13;

{
  "name": "MyApp",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.5.3",
    "angular-ui-router": "~0.2.15",
    "bootstrap-sass": "~3.3.5",
    "angular-bootstrap": "~1.3.3",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.5.3",
    "angular-material": "^1.1.3",
    "angular-spinners": "^3.1.2",
    "ang-accordion": "*",
    "angular-material-data-table": "^0.10.10",
    "jquery": "^3.1.1",
    "angular-cookies": "v1.5.11",
    "angular-aria": "1.5.10",
    "angular-messages": "^1.6.3"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.3"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  },
  "resolutions": {
    "angular": "~1.5.3"
  }
}

＆＃13;

我一直在寻找过去2天的解决方案，但似乎没有什么对我有用。我附上了bower.json，myApp模块和index.html的摘要。

＆＃13;

angular.module('MyApp', ['ngAnimate','ui.router', 'ui.bootstrap', 'toastr','ngMaterial','ngAria'])
  .constant('malarkey', malarkey)
  .constant('moment', moment)
  .config(config)
  .config(routerConfig);

＆＃13;

<!doctype html>
<html ng-app="myApp" ng-strict-di>

<head>
  <meta charset="utf-8">
  <title>My</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  <link rel="stylesheet" href="./bower_components/animate.css/animations.css" />
  <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css" />
  

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css({.tmp/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <!-- css files will be automatically insert here -->
  <!-- endinject -->
  <!-- endbuild -->

</head>

<body>
  <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <acme-navbar></acme-navbar>

  <div ui-view>
  </div>

  <!-- build:js(src) scripts/vendor.js -->
  <!-- bower:js -->
  <!-- run `gulp inject` to automatically populate bower script dependencies -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js({.tmp/serve,.tmp/partials}) scripts/app.js -->
  <!-- inject:js -->
  <!-- js files will be automatically insert here -->
  <!-- endinject -->

  <!-- inject:partials -->
  <!-- angular templates will be automatically converted in js and inserted here -->
  <!-- endinject -->
  <!-- endbuild -->


</body>
<acme-footer></acme-footer>
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<!-- Used for JavaScript animations (include this before angular.js) -->
<script src="./bower_components/jquery/dist/jquery.js"></script>
<!-- Adds animation support in AngularJS -->
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<!-- AngularJS Material Javascript now available via Google CDN; version 1.0.7 used here -->


<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="./bower_components/angular-cookies/angular-cookies.js"></script>
</html>

＆＃13;

有关如何解决我的问题的任何建议？

Answer 1

经过长时间的小故障，我终于得到了什么问题。它是依赖于模块ngMaterial依赖的不兼容版本的依赖项。在我降级ngMassages后，一切正常。感谢。

{
  "name": "MyApp",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.5.3",
    "angular-ui-router": "~0.2.15",
    "bootstrap-sass": "~3.3.5",
    "angular-bootstrap": "~1.3.3",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.5.3",
    "angular-material": "^1.1.3",
    "angular-spinners": "^3.1.2",
    "ang-accordion": "*",
    "angular-material-data-table": "^0.10.10",
    "jquery": "^3.1.1",
    "angular-cookies": "v1.5.11",
    "angular-aria": "1.5.10",
    "angular-messages": "^1.6.3"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.3"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  },
  "resolutions": {
    "angular": "~1.5.3"
  }
}

ngMaterial无法在heroku上加载，但在本地计算机上运行

1 个答案: