Fehler beim instanziieren des Moduls ngMaterial aufgrund von: Fehler: [$ injector: nomod]

Also habe ich Yeoman verwendet, um eine eckige Anwendung zu erstellen, indem ich den Generator fountain-angular1 benutze und versuche, eckige Materialien damit zu verwenden. Ich habe einen anderen Beitrag über diesen Fehler von ngMaterial aus verschiedenen Gründen gesehen, aber keine der Lösungen schien für mich zu funktionieren.

Ich habe die Abhängigkeiten installiert, und sie in der spezifischen Reihenfolge gebracht, wie vorgeschlagen. Ich bin ziemlich neu in Angular, also vermute ich, dass ich wahrscheinlich etwas Grundlegendes vermisse. Ich habe so viel Zeit damit verbracht, zu versuchen, dies zur Arbeit zu bringen, und ich bin mir nicht sicher, was ich falsch mache. Jede Hilfe wäre willkommen!

index.js Datei:

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" 
    ] 
    } 
}

Dateipfad:

Quelle

2017-02-13 cheesydoritosandkale

Es sieht so aus, als ob 'node_modules' eine Ebene über Ihren öffentlich zugänglichen Dateien liegt. Du bist wahrscheinlich am besten, sie in einer einzigen Datei kombiniert etwas mit wie [ 'schluck-Lauben files'] (https://www.npmjs.com/package/gulp-bower-files) – haxxxton

ich tun nicht denken Sie Module aus node_modules wie diese

<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>

, weil Sie diese Struktur

node_modules 
app/index.html

so src="/node_modules/..." in Ihrem HTML, Verweise auf app/node_modules... die existieren haben Zugriff nicht.

Sie könnten versuchen, src="/node_modules/whatever" zu src="../node_modules/whatever zu ändern, was Sinn macht, aber es hängt von Ihrem Server, der in der Regel keine übergeordneten Referenzen über Server Root-Ordner erlaubt.

Für eine dauerhafte Lösung müssen Sie Ihre Dateien, die sich in node_modules befinden, aus app/something referenzieren, indem Sie entweder einen Link erstellen oder Dateien kopieren. Gulp (der in Fontäne-Angular1 verwendet wird) sollte eine Methode haben, dies zu tun. Versuchen Sie gulp build laufen und sehen, ob Ihre Winkel Module in einem Verzeichnis innerhalb app/

Eine weitere Option kopiert werden, ist für Sie bower install angular-aria angular-animate angular-material zu tun und dann Referenz-Dateien aus dem Index zu ../bower_components/angular-whatever/angular-whatever.js

Quelle

2017-02-13 01:08:24 jperelli

Vielen Dank für die Beantwortung! Also habe ich versucht, Schluck zu bauen und es gibt mir eine Menge Fehler wie :::: @ (webpack) /lib/webpack.js @ multi Winkel angular-animate angular-aria Winkel-Filter angular-Material Winkel-Moment angular-ui -router babel-core webpack FEHLER in ./~/isexe/index.js Modul nicht gefunden: Fehler: Kann 'fs' in '/ Users/myname/Dokumente/appname/node_modules/isexe' @ nicht auflösen. /~/isexe/index.js 1: 9-22 @ ./~/which/which.js @ ./~/node-gyp/lib/build.js @ ./~/node-gyp/lib^\. \ /.*$ @ ./~/node-gyp/lib/node-gyp.js Muss ich alle meine Abhängigkeiten mit bower neu installieren? – cheesydoritosandkale

Ich habe auch versucht, die ../ an den Anfang, die nicht funktioniert haben. – cheesydoritosandkale

Danke für die Kommentare und die Vielfalt der Lösungen! Ich habe tatsächlich herausgefunden, was mein Problem war. Da ich es bereits mit npm installiert hatte, brauchte ich nur eckige Materialien in meiner index.js-Datei, genau dort, wo es Angular benötigt. Es brauchte wie folgt aussehen:

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

Damit brauche ich nicht diese Verweise zu verwenden, bei allen:

<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>

und es dann an das Modul hinzufügen:

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

Ich hoffe, dies hilft anderen, dieses Problem zu haben. Wirklich einfache Lösung!

Quelle

2017-02-14 14:15:10 cheesydoritosandkale

Fehler beim instanziieren des Moduls ngMaterial aufgrund von: Fehler: [$ injector: nomod]

Antwort

Verwandte Themen