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?
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? –
@ 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. –