安装 Angular Material，“无法实例化模块 ngMaterial”，即使我使用的是 Angular 版本 1.3.0

Posted 2023-02-22

【中文标题】安装 Angular Material，“无法实例化模块 ngMaterial”，即使我使用的是 Angular 版本 1.3.0

【英文标题】：Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0

【发布时间】：2015-09-11 00:27:29

【问题描述】：

这非常令人沮丧，我使用 mean.js yeoman 生成的应用程序，似乎无法启动并运行 angular-material。我读了另一个关于问题Angularjs with material design Failed to instantiate module ngMaterial 的*** 问题。所以我更新了我的 bower.json 文件并运行了 bower update 和 bower install。它仍然不起作用。在 bower 更新期间，bower 给了我这条消息 Unable to find a suitable version for angular, please choose one:，但我总是选择 Angular 1.3.0 或更高版本。 这是我的 bower.json 的副本：

  "name": "colign",
  "version": "0.0.1",
  "description": "Full-Stack javascript with MongoDB, Express, AngularJS, and Node.js",
  "dependencies": 
    "bootstrap": "~3",
    "angular": "~1.3",
    "angular-resource": "~1.3",
    "angular-mocks": "~1.3",
    "angular-bootstrap": "~0.11.2",
    "angular-ui-utils": "~0.1.1",
    "angular-ui-router": "~0.2.11",
    "angular-material": "~0.10.0"
  

以下是控制台错误消息： 错误：[$injector:modulerr] 无法实例化模块 ngMaterial 由于： 错误：[$injector:nomod] 模块“ngMaterial”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

Angular config.js 文件：

'use strict';

// Init the application configuration module for AngularJS application
var ApplicationConfiguration = (function() 
    // Init module configuration options
    var applicationModuleName = 'colign';
    var applicationModuleVendorDependencies = ['ngResource', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngMaterial'];

    // Add a new vertical module
    var registerModule = function(moduleName, dependencies) 
        // Create angular module
        angular.module(moduleName, dependencies || []);

        // Add the module to the AngularJS configuration file
        angular.module(applicationModuleName).requires.push(moduleName);
    ;

    return 
        applicationModuleName: applicationModuleName,
        applicationModuleVendorDependencies: applicationModuleVendorDependencies,
        registerModule: registerModule
    ;
)();

提前感谢您的帮助！

【问题讨论】：

您是否在模块依赖项中包含“ngMaterial”？

他确实是因为错误信息！

你能提供你的html脚本标签吗？也许您只是忘记添加必要的脚本标签。

ngMaterial 具有其他依赖项，例如 Angular aria

@PSL 你是对的......你没有......我没有正确阅读你的答案:-)

【参考方案1】：

Angular 材质 ngMaterial 也依赖于 ngAria 和 ngAnimate。您需要加载它们。

angular.module('ngMaterial', ["ng","ngAnimate","ngAria", ...other material sub modules

您可以从angular aria 和angular animate 下载它。根据您的角度版本使用这些的正确版本。

此外，仅在项目中添加脚本是不够的，您还需要在 html 中加载它们。还要在ng-material 脚​​本之前加载它们。

【讨论】：

其实你不需要在你的 bower 文件中添加 angular-aria 和 angular-animate 的依赖，因为它们是 angular material 的依赖，bower 会解决的