2017-03-15 2 views
0

Heroku wird erfolgreich erstellt und bereitgestellt. Allerdings, wenn ich versuche, die App öffnen Sie die URL zur Verfügung gestellt verwenden, zeigt es diesen Fehler im BrowserngMaterial kann nicht auf heroku geladen werden, funktioniert aber auf dem lokalen Computer

Error: [$injector:modulerr] Failed to instantiate module myApp due to:

und

" Module 'ngMaterial' is not available!

Was ich ist verwirrend, ist, dass vor Ort alles gut läuft, ohne dass Error. Ich habe das scharfkantige Material Modul lade mit --save und enthalten das notwendige Skript in

{ 
 
    "name": "MyApp", 
 
    "version": "0.0.0", 
 
    "dependencies": { 
 
    "angular-animate": "~1.5.3", 
 
    "angular-ui-router": "~0.2.15", 
 
    "bootstrap-sass": "~3.3.5", 
 
    "angular-bootstrap": "~1.3.3", 
 
    "malarkey": "yuanqing/malarkey#~1.3.1", 
 
    "angular-toastr": "~1.5.0", 
 
    "moment": "~2.10.6", 
 
    "animate.css": "~3.4.0", 
 
    "angular": "~1.5.3", 
 
    "angular-material": "^1.1.3", 
 
    "angular-spinners": "^3.1.2", 
 
    "ang-accordion": "*", 
 
    "angular-material-data-table": "^0.10.10", 
 
    "jquery": "^3.1.1", 
 
    "angular-cookies": "v1.5.11", 
 
    "angular-aria": "1.5.10", 
 
    "angular-messages": "^1.6.3" 
 
    }, 
 
    "devDependencies": { 
 
    "angular-mocks": "~1.5.3" 
 
    }, 
 
    "overrides": { 
 
    "bootstrap-sass": { 
 
     "main": [ 
 
     "assets/stylesheets/_bootstrap.scss", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.eot", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.svg", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.woff", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" 
 
     ] 
 
    } 
 
    }, 
 
    "resolutions": { 
 
    "angular": "~1.5.3" 
 
    } 
 
}

Ich habe für die Lösung für die letzten 2 Tage suchen, aber nichts scheint zu funktionieren für mich. Ich habe ein Schnipsel von meinem bower.json, myApp Modul und index.html beigefügt.

angular.module('MyApp', ['ngAnimate','ui.router', 'ui.bootstrap', 'toastr','ngMaterial','ngAria']) 
 
    .constant('malarkey', malarkey) 
 
    .constant('moment', moment) 
 
    .config(config) 
 
    .config(routerConfig);
<!doctype html> 
 
<html ng-app="myApp" ng-strict-di> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>My</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 
 
    <link rel="stylesheet" href="./bower_components/animate.css/animations.css" /> 
 
    <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css" /> 
 
    
 

 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
 

 
    <!-- build:css({.tmp/serve,src}) styles/vendor.css --> 
 
    <!-- bower:css --> 
 
    <!-- run `gulp inject` to automatically populate bower styles dependencies --> 
 
    <!-- endbower --> 
 
    <!-- endbuild --> 
 

 
    <!-- build:css({.tmp/serve,src}) styles/app.css --> 
 
    <!-- inject:css --> 
 
    <!-- css files will be automatically insert here --> 
 
    <!-- endinject --> 
 
    <!-- endbuild --> 
 

 
</head> 
 

 
<body> 
 
    <!--[if lt IE 10]> 
 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
    <![endif]--> 
 

 
    <acme-navbar></acme-navbar> 
 

 
    <div ui-view> 
 
    </div> 
 

 
    <!-- build:js(src) scripts/vendor.js --> 
 
    <!-- bower:js --> 
 
    <!-- run `gulp inject` to automatically populate bower script dependencies --> 
 
    <!-- endbower --> 
 
    <!-- endbuild --> 
 

 
    <!-- build:js({.tmp/serve,.tmp/partials}) scripts/app.js --> 
 
    <!-- inject:js --> 
 
    <!-- js files will be automatically insert here --> 
 
    <!-- endinject --> 
 

 
    <!-- inject:partials --> 
 
    <!-- angular templates will be automatically converted in js and inserted here --> 
 
    <!-- endinject --> 
 
    <!-- endbuild --> 
 

 

 
</body> 
 
<acme-footer></acme-footer> 
 
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
 
<!-- Used for JavaScript animations (include this before angular.js) --> 
 
<script src="./bower_components/jquery/dist/jquery.js"></script> 
 
<!-- Adds animation support in AngularJS --> 
 
<script src="./bower_components/angular-animate/angular-animate.js"></script> 
 
<!-- AngularJS Material Javascript now available via Google CDN; version 1.0.7 used here --> 
 

 

 
<script src="./bower_components/angular-material/angular-material.js"></script> 
 
<script src="./bower_components/angular-cookies/angular-cookies.js"></script> 
 
</html>

Vorschläge, wie mein Problem zu lösen?

+0

würde ich Ihr Projekt kopieren und Ihre node_modules Ordner löschen und ‚npm ​​installieren‘ und sehen Sie, wenn Sie irgendwelche Fehler auftreten. Musstest du materialisieren? –

+0

@ CodyG. Danke für die schnelle Antwort Mann. Ich habe meine Ordner node_modules und bower_components gelöscht und 'npm install' ausgeführt, aber es scheint, als hätte es nichts gelöst. –

Antwort

0

nach einer langen Panne bekam ich endlich, was das Problem war. Es waren inkompatible Versionen von Abhängigkeiten, von denen ngMaterial abhängig war. Nachdem ich ngMassages heruntergestuft hatte, funktionierte alles gut. Vielen Dank.

{ 
 
    "name": "MyApp", 
 
    "version": "0.0.0", 
 
    "dependencies": { 
 
    "angular-animate": "~1.5.3", 
 
    "angular-ui-router": "~0.2.15", 
 
    "bootstrap-sass": "~3.3.5", 
 
    "angular-bootstrap": "~1.3.3", 
 
    "malarkey": "yuanqing/malarkey#~1.3.1", 
 
    "angular-toastr": "~1.5.0", 
 
    "moment": "~2.10.6", 
 
    "animate.css": "~3.4.0", 
 
    "angular": "~1.5.3", 
 
    "angular-material": "^1.1.3", 
 
    "angular-spinners": "^3.1.2", 
 
    "ang-accordion": "*", 
 
    "angular-material-data-table": "^0.10.10", 
 
    "jquery": "^3.1.1", 
 
    "angular-cookies": "v1.5.11", 
 
    "angular-aria": "1.5.10", 
 
    "angular-messages": "^1.6.3" 
 
    }, 
 
    "devDependencies": { 
 
    "angular-mocks": "~1.5.3" 
 
    }, 
 
    "overrides": { 
 
    "bootstrap-sass": { 
 
     "main": [ 
 
     "assets/stylesheets/_bootstrap.scss", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.eot", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.svg", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.woff", 
 
     "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" 
 
     ] 
 
    } 
 
    }, 
 
    "resolutions": { 
 
    "angular": "~1.5.3" 
 
    } 
 
}

Verwandte Themen