What steps can you take to troubleshoot the [$injector:unpr] Unknown provider error in Angular?

My goal is to create a basic hybrid app using angular, ionic, cordova for the WordPress FreshlyPress API. Below are my files:

app.js

var App = angular.module("SampleApp", ["ionic"]);

App.service("FreshlyPressed",["$http", "log", FreshlyPressed]);

App.controller("AppCtrl" ,["$scope" , "FreshlyPressed", "$log" , AppCtrl]);

function AppCtrl($scope, FreshlyPressed, $log){
    $scope.posts = [];
    $scope.refresh = function(){
        FreshlyPressed.getBlogs($scope);
    }
} 

function FreshlyPressed($http, $log){
    this.getBlogs =function($scope){
        $http.jsonp("https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK")
        .success(function(result){
            $scope.posts=resul.posts;
        });
    };
}

index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="SampleApp">
    <head>
        <meta charset="utf-8">
        <title>Freshly Fressed</title>

        <!---Ionic Libs-->
        <link rel="stylesheet" href="lib/ionic/css/ionic.css">
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!--Myapp-->

        <link rel="stylesheet" href="css/style.css">
        <script src="js/app.js"></script>

    </head>
    <body data-ng-controller="AppCtrl">
        <ion-header-bar class="bar-balanced">
            <h1 class="title">Freshly Pressed</h1>
            <button class="button" data-ng-click="refresh()">
            <i class="icon ion-refresh"></i>

            </button>
        </ion-header-bar>
        <ion-content>
            <div class="card list" data-ng-repeat="p in posts">
                <div class="item item-avatar-left">
                    <img data-ng-src="{{ p.author.avatart_URL }}" alt="">
                    <h2>{{ p.author.nice_name }}</h2>
                    <p><a href="{{ p.author.URL }}">{{ p.author.URL }}</a></p>
                </div>
                <div class="item item-body">
                    <h1>{{ p.title }}</h1>
                    {{ p.content }}
                </div>
            </div>

        </ion-content>

    </body>
</html>

However, I encounter an error when running this code:

Error: [$injector:unpr] Unknown provider: logProvider <- log <- FreshlyPressed
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=logProvider%20%3C-%20log%20%3C-%20FreshlyPressed
    at ionic.bundle.js:8900
    at ionic.bundle.js:13094
    at Object.getService [as get] (ionic.bundle.js:13241)
    at ionic.bundle.js:13099
    at getService (ionic.bundle.js:13241)
    at invoke (ionic.bundle.js:13273)
    at Object.instantiate (ionic.bundle.js:13290)
    at Object.<anonymous> (ionic.bundle.js:13151)
    at Object.invoke (ionic.bundle.js:13282)
    at Object.enforcedReturnValue [as $get] (ionic.bundle.js:13135)

Answer №1

The line should use $log instead of log-

App.service("FreshlyPressed",["$http", "$log", FreshlyPressed]);

Angular injector cannot locate the log module resulting in a logprovider error. The correct module is $log

Answer №2

App.service("LatestPosts",["$http", "log", LatestPosts]);

App.controller("MainCtrl" ,["$scope" , "LatestPosts", "$logger" , MainCtrl]);

It appears that you forgot to include the $ sign before the first log.

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

A guide to setting up Firebase(FCM) Push Notifications on nuxtjs / vuejs

Despite extensive hours scouring the internet for a user-friendly method to incorporate Firebase FCM Push Notification into my nuxt project, I came up empty-handed. ...

Tips for developing a module for node configuration that exclusively exports JSON data

I have a query about creating a node module that specifically exposes JSON files for configuration purposes. While I know I can easily export a JSON object from index.js, I'm exploring better alternatives to expose JSON files from the node module and ...

What is the best way to utilize props and mounted() in NuxtJS together?

I'm a beginner with NuxtJS and I'm looking to implement window.addEventListener on a specific component within my page. However, I also need to ensure that the event is removed when the page changes. In React, I would typically approach this as ...

Encountering a problem with the DynamoDB list_append expression in a Node.js environment

When attempting to add a new Task to my tasks array on DynamoDB, I encountered the following error message: "The provided expression refers to an attribute that does not exist in the item" This is how my object looks like in the DB: { "client_name": ...

Using Coffeescript to implement mixed objects with magic getters and setters like in Harmony, node-proxy, and other Javascript proxies

I am looking to create a proxied object with methods and private variables attached to it. This means having normal object properties: foo = {} foo.bar = "baz" foo.boo = "hoo" along with some prototypes: foo.setPrivateThings = function(value){ if (valu ...

What is the best approach for connecting Advanced Custom Fields in WordPress to components in my Next.js frontend using GraphQL?

Currently, I am in the process of constructing a website by utilizing WordPress as the headless CMS and NextJs for my frontend. My dilemma lies in using the free version of ACF and wanting to dynamically query and map ACF to components in Next when generat ...

How can I refresh an HTML element when a value in a multi-dimensional array changes?

I'm facing an issue with a v-btn component that gets its content from values deep inside a multi-dimensional array. <div v-for="student in students"> <v-btn disabled v-for="tag in student.tags">{{tag}}</v-btn> </div> In ...

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

Can anyone help me figure out what I'm doing wrong here? Essentially, I am trying to open a PDF in Google Viewer: <a id="pdflink" href="https://docs.google.com/viewer?url=http://pdpdpd.pdf" target="_blank">Pdf</a> When it opens in the vi ...

How can I incorporate an icon on the right side of a jQuery UI accordion?

How can I use CSS or HTML to position a jQuery UI icon on the right side of an accordion widget's headers? For example, if I have the following HTML: <!-- Accordion --> <div id="accordion"> <div> <h3><a href="# ...

Shifting Data between JavaScript and PHP

At the moment, I am trying to transfer a variable from JavaScript to PHP. This variable is being utilized for Stripe payment processing. I believe AJAX might be necessary for this task? function _goAheadWithCustomerId(c) { console.log('Customer I ...

Loading an external script is causing a total style overhaul on my website

Every time I load my page to check the remaining balance of a gift card (using a third-party script), it seems to mess up the styles that are already set on my website. Here is a snippet of the code causing the issue: <div id="main" class=&quo ...

The jQuery validation feature permits entering a code that falls within the range of user1 to user100

Here is an example where the user can only enter a code between 1 and 100. Otherwise, it will return false. var regexCode = /var regexEmail = /^0*(?:[1-9][0-9]?|100)$/; $(document).on('change','#code',function() ...

What is the best way to send a string and a component as a prop?

When passing a component, it works fine like this: <CardTitle title={this.props.post.title} subtitle={ <Link to={this.props.post.author}>{this.props.post.author}</Link> } /> However, when trying to pass both a component and string t ...

Should I convert to an image or utilize the canvas?

I'm debating whether it's more efficient to convert a canvas drawing into an image before inserting it into the DOM, or if it's better to simply add the canvas itself. My method involves utilizing canvas to generate the image. ...

Instructions for overlaying a text onto the select input field in DataTables

I am currently utilizing the DataTables select input feature to capture only the first three columns of data. However, I would like to enhance this by adding a text element above the select inputs within the DataTables interface. Is there a way to achieve ...

Incorporate duration into date using angular

In my Firebase database, I store the following information: Timestamp for the day a record was created in Firebase. Terms entered by the user at the time of creation. For instance, it may look like this: 1439612582756 // converts to: Aug 14, 2015 15 / ...

Guide to displaying a live clock on the main page of a website?

After attempting to search for a solution on Google, I found that the examples available are too complex for my understanding. I am looking to display a dynamic clock on my master page but I am not well-versed in Jquery. Is there an easy way for a beginn ...

Error Encountered When Using Eclipse Node Debugger to Load Modules with require

Currently, I am using a Windows machine with the latest version of Eclipse. Following the guidelines provided at https://github.com/nodejs/node-v0.x-archive/wiki/Using-Eclipse-as-Node-Applications-Debugger, I executed node --debug-brk server.js in the comm ...

What is the best way to utilize a For each loop with a controller object?

I am struggling with a problem in my Angular foreach loop where I keep getting an Undefined value when trying to access it. Can someone advise me on how to modify the code below so that I can successfully access the value and store it in $rootScope? patie ...

cancel button in confirmation dialog is malfunctioning

Having an issue with a button that triggers a confirmation dialog: <asp:Button ID="btnSignOff" runat="server" CssClass="button" Text="Sign OFF" OnClick="btnSignOff_Click" OnClientClick="return confirm('Are you sure you want to Sign OF ...