Solving UI routing with AngularFire 0.9

I recently followed a tutorial here and encountered this error:

   Unknown provider: currentAuthProvider <- currentAuth

I made sure to add currentAuth to all my controllers, but I'm still getting the error. Any idea what could be causing it?

 Firebase 2.0.4 
 AngularFire 0.9.0

This is how my routes file looks like:

      .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

     $urlRouterProvider.otherwise('/');

     $stateProvider

         .state('home', {
         url: '/',
         templateUrl: 'views/home.html',
         controller: "homeCtrl",
         resolve: {
             "currentAuth": ["userFactory", function(userFactory) {
                 return userFactory.$waitForAuth();
             }]
         }
     })

Currently, I only have two modules included:

      var warp = angular.module('warp', [
     'firebase',
     'ui.router'
 ])

Here's an excerpt from one of my controllers:

     angular.module('warp')
    .controller("signupCtrl", ["$rootScope", '$scope', 'userFactory', '$window', '$firebase', '$location', 'USERS', 'currentAuth',
        function($rootScope, $scope, userFactory, $window, $firebase, $location, USERS, currentAuth) {
javascriptangularjsfirebaseangularfireangular-ui-router

Answer №1

Review your HTML partial view and eliminate the ng-controller declaration.

NgRoute creates the controller for you and links it to the DOM specified in your view, therefore there is no necessity to specify the controller using ng-controller in the partial HTML of the view.

This example demonstrates:

<!-- within its own HTML file, let's say views/signupCtrl.html -->
<div>  <!-- Notice, no need for ng-controller="signupCtrl"... -->
  ...signup Form etc...
</div>

If you do include a ng-controller definition (which I suspect you did), angular will attempt to create the controller twice:

  • First when it encounters it while loading the DOM, at which point currentAuth may not be defined yet, causing an unknown provider error if it's listed as a dependency in your controller.
  • Secondly upon completion of resolve.

Answer №2

To effectively implement the 'currentAuth' object, it is essential to only inject it into the Controller responsible for sign-in management. I found success by removing it from all other Controllers in my project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from the database without the need to reload the page

Hi there! I have a PHP script that fetches data from a database and I want to display this data within a div element with a "link" class without having to reload the page. Check out the code snippet below: <? include('config.php'); $rs = m ...

javascriptphpjqueryhtmlcss

Looking to incorporate the jquery-ui-daterangepicker into your Angular project?

Hello there! I was looking to integrate the jquery ui datepicker plugin into my app, and came across this plugin. I want to achieve the same functionality without making any changes. Here is the code snippet that I have tried so far: (function(){ angular. ...

javascriptjqueryangularjs

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

For all the C# devs transitioning to TypeScript in VS Code, this question is directed at you. I was captivated by the code completion feature in VS C#. To paint a clearer picture, let's say I'm trying to write: console.log('hello') W ...

javascriptc#typescriptvisual-studio-code

Using javascript, what is the best way to clear a text field with a specific condition?

When I clear the text field #t1, I expect text field #d1 to also clear. However, the last two lines of code do not achieve this result. function utl() { var tField = document.getElementById('t1'); var dField = document.getElementById(&a ...

javascripthtml

Preventing form submission with JavaScript by implementing multiple validation checks

Preventing a form from submitting when validation returns false is possible. Here's an example: <form name="registration" action="registration.php" onsubmit="return validate()"> <!-- some inputs like: --> <input type="text" id="us ...

javascriptformsvalidation

determine the color of the pixel at the top left corner of a jpg image

If we were given a specific URL, for instance, "//upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg", how can we use javascript (specifically jQuery or Angular) to obtain the top left coordinates (or any (x,y) coordinates) of this image? Just to clarify, ...

javascriptjqueryimageangularcolors

Bypass the pre-commit hook when using the "npm version" command

When using the npm version command, it will commit the change to package.json and create a tag. Is there a method to avoid the execution of commit hooks? ...

javascriptgitnpmpre-commit-hook

Determine if Param is empty or not within the context of express.js

I am looking to create a table and populate it with all the parameters that are not empty in the parameter list provided below: http://localhost:5002/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="407535732b7008121931190539142 ...

javascriptnode.jsexpress

The sendKeys() method in Protractor is failing due to the element being hidden/not

Hi there! I am currently new to automated testing with protractorJS for an angularJS homepage. While the code I've written so far has been successful, I'm facing an issue where I'm unable to input keys into the search field. After running th ...

javascriptangularjsprotractorautomated-tests

using ng-switch to display items

Is there a more efficient way to structure this code without repeating the inner content of the list? <div ng-switch on="list.type"> <ul ng-switch-when="unorder"> <li ng-repeat="item in items"> {{ item.text }} & ...

angularjsangularjs-ng-switch

What is the best way to transfer a base64 image string obtained from pouchdb to a different api as a file?

I have stored an image in base64 format within pouchdb, and I am now looking to upload the same file to a specific API on the server. Is there a way for me to extract the file path or convert the base64 image back into a regular file so that it can be acc ...

angularjsimagebase64ionic-frameworkpouchdb

Transforming a JavaScript map into an array of objects

Given a map of key value pairs that I cannot control, I am tasked with converting them into an array of objects in a specific format. let paramArray1 = []; let paramArray2 = []; paramArray1.push({username:"test"}) paramArray1.pu ...

javascriptarraysmappingjavascript-objects

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

cssangularjsangular-material

Received an error while using an Express router: "Unable to access property 'caseSensitive' of undefined."

javaScriptCode app.js const express = require('express') const app = express() const {route} = require('./routes/route') app.use(express.static('./public')); app.use(express.json()); app.use(express.urlencoded()); app.use(rout ...

javascriptnode.jsexpress

Modifying the $locale setting in ui-router

My Goal and Approach Within our AngularJS application, we utilize angular-ui-bootstrap for datepickers. Our aim is to localize the datepickers based on the user's locale. However, dynamically changing the locale in AngularJS poses a challenge due to ...

javascriptangularjsinternationalizationangular-ui-routerangular-ui-bootstrap

Encounters a fault while processing the php output

Displaying an error in the query The browser is showing the correct answer. $.ajax({ type: "POST", url: url, async: true, contentType: " charset=utf-8", dataType: "XMLHttpRequest", success: func ...

javascriptphpjqueryajax

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

javascriptangulartypescriptnestjs

Attempting to create a conditional state in Redux based on data fetched from an API

I'm currently exploring the most effective way to set up a conditional modal popup based on whether the response from an API call is null or not. While I typically work with functional components, the component I'm working with here is built as a ...

javascriptreactjsreduxcomponentsstate

The request to "http:192.200.2.2/example.com/api/value" resulted in a 405 (Method Not Allowed) error, and the response for prelight included an invalid HTTP status code of 405

Is there a way to call an API from an HTML page using AngularJS? I have written the following script in my HTML page: $http({ method:'POST', url:'http:192.200.2.2/example.com/api/value', headers:{ X-EXAMPLE.COM-WEB- ...

htmlangularjs

Adjust CardMedia Images to match their content in the new MUI 5 version

I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...

javascripthtmlcssreactjsmaterial-ui