![](/img/trans.png)
[英]Error in my console - [$injector:modulerr] Failed to instantiate module starter due to: [$injector:nomod] Module 'starter' is not available
[英]Failed to > instantiate module ngMaterial due to: Error: [$injector:nomod]
因此,我使用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"
]
}
}
感谢您的评论和各种解决方案! 我实际上发现了我的问题所在。 由于我已经使用npm安装了它,因此我只需要在index.js文件中的Angular下要求使用angular-materials。 它需要看起来像这样:
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)
希望这对其他遇到此问题的人有所帮助。 真的很简单!
我认为您不能像这样从node_modules访问模块
<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>
因为你有这个结构
node_modules
app/index.html
因此src="/node_modules/..."
在您的html中,引用了app/node_modules...
不存在。
您可以尝试将src="/node_modules/whatever"
更改为src="../node_modules/whatever
,这很有意义,但这取决于您的服务器,通常不允许父引用超出服务器根文件夹。
对于永久解决方案,您需要从app / something中引用位于node_modules内部的文件,您可以通过链接或复制文件来实现。 Gulp(在Fountain-angular1中使用)应该有一种方法来做到这一点。 尝试运行gulp build
并查看您的angular模块是否已复制到app/
某个目录中
另一个选择是让您进行bower install angular-aria angular-animate angular-material
,然后将索引中的文件引用到../bower_components/angular-whatever/angular-whatever.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.