Question

所以我使用Yeoman创建一个角度应用程序，使用生成器fountain-angular1，我正在尝试使用角度材料。我看过其他关于从ngMaterial获取此错误的帖子有不同的原因，但没有一个解决方案对我有用。

我已经安装了依赖项，并按照建议将它们按特定顺序放置。我对Angular很新，所以我猜我可能遗漏了一些基本的东西。我花了很多时间试图让它发挥作用，我不确定我做错了什么。任何帮助将不胜感激！

index.js文件：

var angular = require('angular');

var techsModule = require('./app/techs/index');
require('angular-ui-router');
var routesConfig = require('./routes');

var main = require('./app/main');
var header = require('./app/header');
var title = require('./app/title');
var footer = require('./app/footer');

require('./index.scss');

angular
  .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate', 'ngAria'])
  .config(routesConfig)
  .component('app', main)
  .component('fountainHeader', header)
  .component('fountainTitle', title)
  .component('fountainFooter', footer);

的index.html

<!doctype html>
<html>

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>FountainJS</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
</head>

<body ng-app="app">
  <ui-view></ui-view>
  <script src="/node_modules/angular/angular.js" type="text/javascript"></script>
  <script src="/node_modules/angular-aria/angular-aria.js"></script>
  <script src="/node_modules/angular-animate/angular-animate.js"></script>
  <script src="/node_modules/angular-material/angular-material.js"></script>
  <script src="index.js"></script>

</body>

</html>

的package.json

{
  "dependencies": {
    "angular": "^1.5.9",
    "angular-animate": "^1.5.0",
    "angular-aria": "^1.5.0",
    "angular-filter": "^0.5.15",
    "angular-material": "^1.1.3",
    "angular-moment": "^1.0.1",
    "angular-ui-router": "~0.2.15",
    "babel-core": "^6.0.1",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/angular-mocks": "^1.5.5",
    "@types/jquery": "^2.0.33",
    "angular-mocks": "^1.5.0-beta.2",
    "gulp-angular-templatecache": "^1.8.0",
    "@types/angular-ui-router": "^1.1.34",
    "del": "^2.0.2",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-filter": "^4.0.0",
    "gulp-util": "^3.0.7",
    "gulp-angular-filesort": "^1.1.1",
    "gulp-htmlmin": "^1.3.0",
    "gulp-insert": "^0.5.0",
    "gulp-ng-annotate": "^1.1.0",
    "gulp-sass": "^2.1.1",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "jasmine": "^2.4.1",
    "es6-shim": "^0.35.0",
    "karma-angular-filesort": "^1.0.0",
    "karma-ng-html2js-preprocessor": "^0.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-phantomjs-shim": "^1.1.2",
    "phantomjs-prebuilt": "^2.1.6",
    "karma-webpack": "^1.7.0",
    "webpack": "2.1.0-beta.20",
    "html-webpack-plugin": "^2.9.0",
    "style-loader": "^0.13.0",
    "css-loader": "^0.23.1",
    "postcss-loader": "^0.8.0",
    "autoprefixer": "^6.2.2",
    "json-loader": "^0.5.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "webpack-fail-plugin": "^1.0.5",
    "ng-annotate-loader": "^0.0.10",
    "html-loader": "^0.4.3",
    "sass-loader": "^3.1.2",
    "node-sass": "^3.4.2",
    "eslint": "^3.2.2",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-plugin-angular": "^1.3.0",
    "eslint-loader": "^1.3.0",
    "babel-loader": "^6.2.0"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "globals": {
      "expect": true
    },
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-space"
    ]
  }
}

档案路径：

Answer 1

感谢您的评论和各种解决方案！我实际上发现了我的问题。因为我已经用npm安装了它，所以我只需要在我的index.js文件中需要angular-materials，就在它需要Angular的地方。它需要看起来像这样：

var angular = require('angular');
require('angular-material');

有了这个，我根本不需要使用这些引用：

<script src="/node_modules/angular/angular.js" type="text/javascript"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>

然后将其添加到模块中：

angular
  .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate'])
  .config(routesConfig)
  .component('app', main)

希望这有助于其他人解决此问题。真的很简单！

Answer 2

我认为你不能像今天这样从node_modules访问模块

openpyxl.worksheet.Worksheet.columns()

因为你有这个结构

<script src="/node_modules/angular/angular.js" type="text/javascript"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>

html中的node_modules app/index.html，src="/node_modules/..."的引用不存在。

您可以尝试将app/node_modules...更改为src="/node_modules/whatever"这是有意义的，但这取决于您的服务器，通常不允许父服务器超出服务器根文件夹。

对于永久性解决方案，您需要从app / something引用node_modules内的文件，您可以通过链接或复制文件来实现。 Gulp（用于fountain-angular1）应该有一个方法来做到这一点。尝试运行src="../node_modules/whatever并查看您的角度模块是否被复制到gulp build

内的某个目录中

另一个选项是让您执行app/，然后将文件从索引引用到bower install angular-aria angular-animate angular-material

无法＆gt;实例化模块ngMaterial由于：错误：[$ injector：nomod]

2 个答案: