I'm getting the following error trying to load the Firebase module in my angular.module function
Here is my web page:
<!doctype html>
<html class="no-js" lang="" >
<head>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"> </script>
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body ng-app="assetMgr">
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!--<script src="scripts/controllers/mainCtrl.js"></script>
<script src="scripts/services/api.js"></script>
<script src="scripts/directives/assets.js"></script> --->
<!-- endbuild -->
</body>
</html>
Here is angular.module code:
'use strict';
var app = angular.module('assetMgr', ['Firebase']);
I'm lost as to why I'm getting this error. Any help would be greatly appreciated.
Thank you in advance.
Angular module are case sensitive, change Firebase to firebase and you should be all set
'use strict';
var app = angular.module('assetMgr', ['firebase']);
You are doing everthing correct Its just the name of firebase. You will need to change it to firebase instead of Firebase.
Related
I am following the phoneCat tutorial[https://docs.angularjs.org/tutorial/] and decide to create a similar structured app. but I keep getting $injector:modulerr Error when I try to include a module I created.
files are arranged like this
The way I started my app is use npm package http-sever with command http-server ...\app.
Another thing I noticed is that if I use http-server command directly(rather than npm start suggested in tutorial) to start app in the app folder it also gives me error message. I am now pretty confused about this.
This is my app.module.js
'use strict';
angular.module('dota2Hero', [
'ngRoute',
'core'
]);
If I remove 'core' from dependency array, the code compiles.
Here is my index.html
<!doctype html>
<html lang="en" ng-app="dota2Hero">
<head>
<meta charset="utf-8">
<title>Dota2 Database</title>
<script src="//code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="app.config.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my core.module.js
'use strict';
angular.module('core',['core.hero']);
You need to change the order in which you load the references, load the core.module.js before loading app.module.js
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="hero-grid/hero-grid.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="hero-grid/hero-grid.component.js"></script>
I'm running through a Pluralsight for angular testing at Play by Play: Angular Testing, and the first module I add is throwing an NG exception out of the gate.
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app.people' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=app.people
I've been through this many times before, but for some reason I can't find my error today.
DETAILS:
The Angular version is v1.5.8.
My app folder structure is represented in this image, and you'll notice the new people folder I added as per the course:
The new app.people module is :
(function(){
'use strict';
angular.module('app.people',[
'app.core',
'app.widgets',
'app.layout'
]);
});
And I've added the app.people module to app.module :
(function() {
'use strict';
angular.module('app', [
'app.core',
'app.widgets',
'app.admin',
'app.people', // ** NEW PEOPLE MODULE **
'app.dashboard',
'app.layout'
]);
})();
And after running gulp dev-serve from a Win 7 cmd prompt. My index.html file is updated as follows (NB. the people.module.js file injected below the <!-- build:js js/app.js --> section) :
<!DOCTYPE html>
<html ng-app="app">
<head>
<style>
.ng-hide {
display: none!important;
}
</style>
<title ng-bind="title">
angular-test
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
<!-- build:css styles/lib.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body>
<div>
<div ng-include="'app/layout/shell.html'"></div>
<div id="splash-page" ng-show="showSplash">
<div class="page-splash">
<div class="page-splash-message">
angular-test
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js -->
<!-- inject:js -->
<script src="/src/client/app/app.module.js"></script>
<script src="/src/client/app/admin/admin.module.js"></script>
<script src="/src/client/app/blocks/exception/exception.module.js"></script>
<script src="/src/client/app/blocks/logger/logger.module.js"></script>
<script src="/src/client/app/blocks/router/router.module.js"></script>
<script src="/src/client/app/core/core.module.js"></script>
<script src="/src/client/app/dashboard/dashboard.module.js"></script>
<script src="/src/client/app/layout/layout.module.js"></script>
<!-- ****** NEW PEOPLE MODULE INJECTED HERE ***** -->
<script src="/src/client/app/people/people.module.js"></script>
<script src="/src/client/app/widgets/widgets.module.js"></script>
<script src="/src/client/app/admin/admin.controller.js"></script>
<script src="/src/client/app/admin/admin.route.js"></script>
<script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script>
<script src="/src/client/app/blocks/exception/exception.js"></script>
<script src="/src/client/app/blocks/logger/logger.js"></script>
<script src="/src/client/app/blocks/router/router-helper.provider.js"></script>
<script src="/src/client/app/core/config.js"></script>
<script src="/src/client/app/core/constants.js"></script>
<script src="/src/client/app/core/core.route.js"></script>
<script src="/src/client/app/core/dataservice.js"></script>
<script src="/src/client/app/dashboard/dashboard.controller.js"></script>
<script src="/src/client/app/dashboard/dashboard.route.js"></script>
<script src="/src/client/app/layout/ht-sidebar.directive.js"></script>
<script src="/src/client/app/layout/ht-top-nav.directive.js"></script>
<script src="/src/client/app/layout/shell.controller.js"></script>
<script src="/src/client/app/layout/sidebar.controller.js"></script>
<script src="/src/client/app/people/people.controller.js"></script>
<script src="/src/client/app/people/people.route.js"></script>
<script src="/src/client/app/widgets/ht-img-person.directive.js"></script>
<script src="/src/client/app/widgets/ht-widget-header.directive.js"></script>
<!-- endinject -->
<!-- inject:templates:js -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
If you can help me determine why my app.people module is causing the NG exception, I would appreciate.
thanks,
Bob
It took me all this time to finally run the test task, grunt test to get a clue as to what my problem what. Turns out the IIFE was missing the final () closing parenths as follows :
(function(){
'use strict';
angular.module('app.people',[
'app.core',
'app.widgets',
'app.layout'
]);
})();
Application now running successfully, which now registers the new People menu item and route:
I have installed phantomjs (coz i'm trying to get the system to make my website in angular crawlable), and i'm stuck on a "nomod" error which occurs only on phantomjs server (the live version works perfectly fine).
<html lang="{{lang}}" itemscope itemtype="http://schema.org/WebPage" ng-app="myApp" class="no-js">
<base href="/">
<head>
<meta name="fragment" content="!">
</head>
<body>
....
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
........
<!-- endbower -->
<script></script>
....
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
loading controllers
....
<!-- endbuild -->
</body>
</html>
For the app.js
'use strict';
angular
.module('myApp', [
'ngAnimate',
'ngAria',
....
])
.filter()....
.config(function ($routeProvider, $stateProvider, $urlRouterProvider, $authProvider, UIRouterMetatagsProvider) {....})
.config(function($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
requireBase: false;
$locationProvider.hashPrefix('!')
});
When i access from phantomjs ng-app is called before myApp being initialized and i tried to start the app with manual bootstrapping without success.
If i try to load the controllers without calling ng-app I still get the error because myApp module is somehow created after all controllers have been loaded.
Hope someone can help...
Thank you very much.
I was also getting the nomod error. In my case it was because my controller had the "const" declaration in it.
Changing "const" to "var" resolved the problem.
My error was:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myAppName&p1=[$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myAppName
Here is a related post explaining the problem with PhantomJS (via Karma) and "const".
https://github.com/karma-runner/karma/issues/1621
when im running my Ionic app inside iOS simulator,
and using the Safari Web inspector, i see this error:
file:///.../.../Application/.../myApp.app/www/lib/ionic/js/angular.min.js.map
Failed to load resource: The requested URL was not found on this server.
Anyone knows how to solve it?
Thanks.
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- Libraries -->
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/ng-lodash/build/ng-lodash.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/constants.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
</html>
I ended up importing ionic.bundle.js instead of ionic.bundle.min.js and the issue was gone
I have tried to follow the https://github.com/angular-ui/ui-map guide to integrate google maps into my project, but I don't quite understand where I'm going going wrong. I also get a strange error.
I load the following scripts:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&callback=onGoogleReady"></script>
The callback throws an error: Uncaught TypeError: Cannot read property 'appendChild' of null on line 11
My app modules
var app = angular.module('app', [
'ngRoute',
'AppControllers',
'AppFactories',
'ngSanitize',
'AppDirectives',
'ngResource',
'ngAnimate',
'mgcrea.ngStrap',
'ui.map' <---- angular map ui
]);
html from my view
<section id="map" style="height:400px;width:400px;">
<div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>
I don't know where to place the
function onGoogleReady() {
console.log('Google maps api initialized.');
angular.bootstrap(document.getElementById('map'), ['app.ui-map']);
}
bit.
What am I doing wrong?
Ok I managed to get it to work by just loading the Google API in first instead of last.