The full error
Error: [$injector:unpr] Unknown provider: FIREBASE_URLProvider <- FIREBASE_URL <- Post
The local server spun up a working app just a couple of days ago. Now when I start it, app is blank and throws up this error. Anyone knows the issue?
Im following a online lesson and perhaps the versions are outdated?
The error link leads to this page. ERROR LINK PAGE IN ANGULARJS but my definitions are ok since they were working previously?
Attached is my index.html scripts.
<!-- build:js scripts/vendor.js -->
<!-- <script src="vendor/someContribJs.js"></script> -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!--all the scripts for the app -->
<!-- endbuild -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
This is just a wild guess, but try placing the angularfire.js script before the firebase-simple-login.js
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
Another guess would be to check if there is a missing configuration concerning the firebase url.
I solved it.
I had another Var X = angular.module(myapp, []) line hidden somewhere in the app.js codes.
Not sure how it got there but removing that did the trick. So the error message was correct.
Related
So a friend of mine asked me if I knew why one of his old sites (made in 2014) wasn't working anymore. Googling a bit, I found out it's because of Chrome 61 version implemented the smooth scroll by default and if u try to load a script instead, it will break the browser behaviour.
On his site, I found he's using this script: https://github.com/themicon/smoothscroll/blob/master/smoothscroll.js
He has a menu with some buttons, each of them has a line of code that looks like this:
ABOUT US
And it should bring to a line of code that looks like this:
<section id="about">
<div class="container">
<div class="row">
</div>
</div>
</section>
The site still works perfectly with Firefox and other browser, so I don't know honestly would I would need to change, I tryed to search for an updated version of the script where maybe the author fixed the issue and found this:
https://github.com/galambalazs/smoothscroll-for-websites/blob/master/SmoothScroll.js
As you notice, the script hasn't been updated for quite long time, indeed even the latest version is prior to the Chrome 61 version update so I doubt that would solve the problem.
On the very end of site, these are the scripts loaded:
<!-- Bootstrap -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Animation -->
<script type="text/javascript" src="js/animation/jquery.appear.js"></script>
<!-- AJAX Contact Form -->
<script type="text/javascript" src="js/contact/contact-form.js"></script>
<!-- Lightbox -->
<script src="lightbox/ekko-lightbox.js"></script>
<!-- Isotope -->
<script src="js/isotope/jquery.isotope.min.js"></script>
<script src="js/isotope/custom-isotope.js"></script>
<!-- Slider Revolution 4.x Scripts -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script>
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
fullScreen:"on",
forceFullWidth:"on",
minFullScreenHeight:"320",
videoJsPath:"rs-plugin/videojs/"
});
}); //ready
</script>
<!-- Custom -->
<script src="js/custom.js"></script>
<!-- Parallex -->
<script src="js/parallex/script.js"></script>
<!-- ScrollTo -->
<script src="js/nav/jquery.scrollTo.js"></script>
<script src="js/nav/jquery.nav.js"></script>
<!-- Sticky -->
<script type="text/javascript" src="js/sticky/jquery.sticky.js"></script>
<!-- Donut Chart -->
<script type="text/javascript" src="js/progress-bars/jquery.donutchart.js"></script>
<script>
$("#donutchart1").donutchart("animate");
$("#donutchart2").donutchart("animate");
$("#donutchart3").donutchart("animate");
$("#donutchart4").donutchart("animate");
$("#donutchart5").donutchart("animate");
$("#donutchart6").donutchart("animate");
$("#donutchart7").donutchart("animate");
$("#donutchart8").donutchart("animate");
</script>
<!-- Owl Carousel -->
<script src="owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- SmoothScroll -->
<script type="text/javascript" src="js/SmoothScroll/SmoothScroll.js"></script>
<!-- Retina -->
<script type="text/javascript" src="js/retina/retina.js"></script>
<!-- FitVids -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.
I have used grunt and following is the current structure:
<!-- build:js scripts/vendors.min.js -->
<!-- bower:js -->
<script src="../file/path.js"></script>
<script src="../file/path2.js"></script>
<script src="../file/path3.js"></script>
<script src="../file/path4.js"></script>
<script src="../file/path5.js"></script>
<script src="../file/path6.js"></script>
<script src="../file/path7.js"></script>
<script src="../file/path8.js"></script>
<!-- endbower -->
<!-- endbuild -->
As defined it gives the output file vendors.min.js, But I want to get output files as follows:
vendors1.min.js
vendors2.min.js
vendors3.min.js
Is there a way to get this done?
I'm using the following directive https://github.com/d-oliveros/ngSmoothScroll to make stuff in this project smoothly scroll to the selected element.
Here's my code:
...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/initcontroller.js"></script>
<!-- endbuild -->
<script src="scripts/libs/materialize.min.js"></script>
<script src="scripts/libs/angular-materialize.js"></script>
</body>
...
That's where the script is included (~/angular-smooth-scroll.min.js) and inside my app.js file I have:
angular
.module('sccateringApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.materialize',
'smoothScroll'
])
'smoothScroll' being the actual dependency inclusion to the project. Following the instructions inside the link given at the beginning of this post this is what I do inside my view:
<li>Contáctame</li>
...
<section class="service-info" id="service-info">
<h1 class="sofia-font">Detalles de Servicio</h1>
...
However, there is no smooth scroll happening and also, there are no warnings/errors given by either the console or jslint on my grunt serve task.
Any idea what I might be doing wrong? I'm VERY new to angular and I'm still trying to find my way through it.
I'm not sure but it may be because you are using the container-id on a link and not a non-anchor tag. I'm using this to scroll to an element in my footer. My code is:
//the anchor link in my nav
Click Me
...
//the element I want to scroll to
<div id="footer"></div>
...
The minified version wasn't working for me so my scripts go as follows:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>
<script src="/js/app.module.js"></script>
<script src="/js/app.controller.js"></script>
<script src="/js/app.service.js"></script>
And for the module:
angular
.module('glasser', [
'ngMaterial',
'ngSanitize',
'smoothScroll'
])
It didn't work for me either, try Angular-Scroll instead. It has a live demo to test in your browser first.
It also has a 'spy' directive so you can add classes to elements that are in view.
Following is the sample usemin build configuration in my index.html file
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
For development version, I dont want to minify the scripts and i want each module into its own js file. So the index.html after running would be
<script src="js/one.js"></script>
<script src="js/two.js"></script>
For production version,I want to minify the scripts and concat them into a single file.So the index.html would be
<script src="js/myApp.js"></script>
I tried the following , but it is not working:
<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->
And run the use-min task like this (prod would be set to true in the prod task and false in dev task) -
usemin({
myApp: prod?[uglify({mangle:true})]:'',
js: prod?'':[uglify({mangle:false})]
}).
I can keep two index.html files and manage this.But I was wondering can this be achieved with a single index.html?
Thanks in advance for any help.
It looks like you're using the same pipeline id: js
<!-- build:js js/one.js -->
<!-- build:js js/two.js -->
Try using unique pipeline ids like so:
<!-- build:js1 js/one.js -->
<!-- build:js2 js/two.js -->
What about this? Merge all javascript files in 2 files like in your dev env. After that just merge those two files into one big?
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- build:myApp js/myApp.js -->
<script src="js/one.js"></script>
<script src="js/two.js"></script>
<!-- endbuild -->
Or even marge all files with one build?
<!-- build:myApp js/myApp.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->