Не удалось> создать экземпляр модуля ngMaterial из-за: Ошибка: [$ injector: nomod]

Поэтому я использовал Yeoman для создания углового приложения, используя генератор fountain-angleular1, и я пытаюсь использовать с ним угловые материалы. Я видел другое сообщение о получении этой ошибки от 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" 
    ] 
    } 
}

Путь к файлу:

источник

2017-02-13 cheesydoritosandkale

похоже, что 'node_modules' на один уровень выше ваших общедоступных файлов. Вы, вероятно, лучше всего объединяете их в один файл, используя что-то вроде ['gulp-bower-files'] (https://www.npmjs.com/package/gulp-bower-files) – haxxxton

я не думает, что вы можете получить доступ модулей из 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, что имеет смысл, но это зависит от вашего сервера, который обычно не позволяет родительские ссылки за пределами корневой папки сервера.

Для постоянного решения вам необходимо ссылаться на свои файлы, находящиеся внутри node_modules из приложения/что-то, вы можете сделать это, создав ссылку или скопировав файлы. У Gulp (который используется в fountain-angular1) должен быть способ сделать это. Попробуйте запустить gulp build и посмотреть, если ваши угловые модули копируются в какой-нибудь каталог внутри app/

Другой вариант для вас, чтобы сделать bower install angular-aria angular-animate angular-material и затем ссылаться на файлы из индекса ../bower_components/angular-whatever/angular-whatever.js

источник

2017-02-13 01:08:24 jperelli

Спасибо, что ответили! Поэтому я попробовал сборку gulp, и это дает мне массу ошибок, таких как :::: @ (webpack) /lib/webpack.js @ многоугольный угловой анимированный угло-арийский угловой фильтр угловой материал угловой момент угловой-ui -router babel-core webpack ОШИБКА ./~/isexe/index.js Модуль не найден: Ошибка: не удается разрешить 'fs' в '/ Users/myname/Documents/appname/node_modules/isexe' @. /~/isexe/index.js 1: 9-22 @ ./~/which/which.js @ ./~/node-gyp/lib/build.js @ ./~/node-gyp/lib^\. \ /.*$ @ ./~/node-gyp/lib/node-gyp.js Нужно ли переустанавливать все мои зависимости с помощью беседки? – cheesydoritosandkale

Я также попытался добавить ../ к началу, которое не сработало. – cheesydoritosandkale

Спасибо за комментарии и разнообразие решений! Я действительно узнал, в чем была моя проблема. Поскольку я уже установил его с npm, мне просто нужно было потребовать угловые материалы в моем файле index.js, прямо там, где он требует Углового. Это необходимо, чтобы выглядеть следующим образом:

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)

Надеюсь, это поможет кому-то еще с этой проблемой. Действительно просто исправить!

источник

2017-02-14 14:15:10 cheesydoritosandkale

Не удалось> создать экземпляр модуля ngMaterial из-за: Ошибка: [$ injector: nomod]

ответ

Смежные вопросы