【问题标题】:Add angular-material to mean.io app将角度材料添加到 mean.io 应用程序
【发布时间】:2016-03-16 04:04:45
【问题描述】:

我正在尝试将angular-material 添加到mean.io 应用程序。

在我的自定义包中,我使用 bower 来安装 angular-material,现在我有一个 .../public/assets/lib/angular-material 文件夹。

到目前为止一切顺利。现在我想在我的自定义 mean.io 模块中使用它,并根据他们添加的文档

MyPackage.angularDependencies(['ngMaterial']);

在我的 app.js 文件中。

我还汇总了 angular-material.css 和 angular-material.js(不确定是否需要)。

但是,我收到以下错误:

Failed to instantiate module mean due to:
Error: [$injector:modulerr]     http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=m...)
at Error (native)
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:6:416
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:38:391
at n (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:7:333)
at g (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:37:488)
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:38:134
at n (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:7:333)
at g (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:37:488)
at eb (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:41:249)
at c (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:19:463

我假设 mean 没有找到 angular-material 模块,我需要在某处指定它的路径。但我不知道在哪里。

【问题讨论】:

  • 您是否在 index.html 中,在 angular.js 之后和脚本之前包含了 angular-material.js?

标签: mean-stack angular-material mean.io


【解决方案1】:

我遇到了同样的问题,发生这种情况是因为 Angular 无法按材料解析某些所需的库,我没有深入研究,但我找到了如下所述的替代解决方案:

导航到项目根目录,然后使用 bower 安装 angular material:

$ bower install angular-material --save

然后,进入项目根目录,您将找到包含 AngularJS 的 /config/assets.json 文件,现在您可以像这样添加角度材质库:

{
  "core": {
    "css": {
      "bower_components/build/css/dist.min.css": [
        "bower_components/angular/angular-csp.css",
  ->    "bower_components/angular-material/angular-material.css",
        "bower_components/angular-ui-select/dist/select.min.css"
      ]
    },
    "js": {
      "bower_components/build/js/dist.min.js": [
        "bower_components/jquery/dist/jquery.min.js",
        "bower_components/angular/angular.min.js",
    ->  "bower_components/angular-aria/angular-aria.js",
    ->  "bower_components/angular-animate/angular-animate.js",
    ->  "bower_components/angular-material/angular-material.js",
        "bower_components/angular-mocks/angular-mocks.js",
        "bower_components/angular-cookies/angular-cookies.min.js",
        "bower_components/angular-resource/angular-resource.min.js",
        "bower_components/angular-sanitize/angular-sanitize.min.js",
        "bower_components/angular-ui-router/release/angular-ui-router.min.js",
        "bower_components/angular-jwt/dist/angular-jwt.min.js",
        "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
        "bower_components/angular-ui-select/dist/select.min.js",
        "bower_components/web-bootstrap/index.js"
      ]
    }
  }
}

我知道mean.io说不要改变核心包,但我没有找到其他方法让它工作,如果有人有更好的解决方案,请告诉我们。

【讨论】:

  • 谢谢,我最终坚持使用捆绑的引导程序。但是,如果我重新审视 angular-material,我现在知道如何解决安装问题。
  • 您还可以在自定义包中注入资产。 bower install angular-animate 来自包目录,然后将其添加到包的 app.js YourPackage.aggregateAsset('css', '../lib/angular-animate/angular-animate.js');
猜你喜欢
  • 1970-01-01
  • 2015-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-24
相关资源
最近更新 更多