AngularJS Error: [$injector:modulerr] - I'm new to this

I am not utilizing ngRoute or any Angular service that requires injection. I am injecting my own module and controller as necessary. However, I am still encountering the following error in the console:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=try&p1=Error%3A%20%…2015%2520experiments%2Fangulartrial%2Fjs%2Flib%2Fangular.min.js%3A21%3A163)
at angular.min.js:6
at angular.min.js:40
at r (angular.min.js:7)
at g (angular.min.js:39)
at db (angular.min.js:43)
at c (angular.min.js:20)
at Bc (angular.min.js:21)
at ge (angular.min.js:19)
at angular.min.js:315
at HTMLDocument.b (angular.min.js:189)

Code: Index.html:

<html ng-app="try" lang="En">
<head>
    <title>Learn Angular 1.5</title>
    <!-- <script src="./js/lib/jquery-3.1.0.min.js" charset="utf-8"></script> -->
    <script src='./js/lib/angular.min.js'></script>
    <script src='app.js'></script>
    <script src='./js/app/blog-list.module.js'></script>
    <script src='./js/app/blog-list.component.js'></script>

</head>
<body>
    <div class='' ng-controller = 'BlogListController'>
    </div>
</body>
</html>

app.js:

angular.module ('try', ['blogList'])
    //This works when I declare the controller right here
    // .controller('BlogListController', function(){
    //  console.log("Hello");
    // })

blog-list.module.js

'use strict';
//simply declare the module here 
angular.module('blogList', [
    //inject dependencies
    'BlogListController'
    ]);

blog-list.component.js

 //declare the controllers, components etc on the module here 
angular.module('blogList')
    .controller('BlogListController', function(){
        console.log("Hello");
    });

Answer №1

The problem lies within the BlogListController being included as a dependency.

angular.module('blogList', [
    //inject dependencies
    'BlogListController'
    ]);

To fix this, modify it to:

angular.module('blogList', []);

Remove the BlogListController from the list of dependencies.

Answer №2

Your HTML isn't utilizing the 'blogList' module which is causing the issue. Update it to:

<html ng-app="blogList" lang="En">
 ...
</html>

Furthermore, make sure to inject your 'BlogListController' when declaring the module. The array is used for dependency injection of external modules necessary for your new module to function

(for example, ngRoute is a common module that needs to be injected separately as it doesn't come pre-installed)

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

Is there a specific regex pattern available to identify CSS and JavaScript links within an HTML file?

Currently, I am using a straightforward gulp task to compress my CSS and JS files. The task appends a .min extension to the names of the compacted files. Now, I want to make changes in the HTML to direct to these new compressed files, like so: Replace thi ...

Is there a way to easily open the RSS link XML Element in a separate browser tab or window?

I have been exploring RSS and creating titles with links. However, when clicking on the link it opens in the same window. I would like it to open in a new window instead. Can someone please advise me on how to achieve this? <a href="http://www.google ...

Extending the base controller in Angular using ui-route

I'm facing a dilemma in my Angular app where I am using ui-route and attempting to expand my base controller. The base controller (appCtrl) functions properly, but the child controller (navigationCtrl) fails on the URL app/welcome. Can someone enlight ...

retrieve information from the local JSON file

Hi there, I am looking to retrieve data from my JSON file and then display it in HTML. Before that, I want to simply log it in the console. How can I accomplish this task? The JSON file will be updated based on user input. varer.json [{"id":&qu ...

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Issue I'm Facing: Error found in components/main/Footer within the file path: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue Components Tree as shown in the screenshot below: https ...

The download attribute in HTML5 seems to be malfunctioning when encountering a 301 Moved Permanently

I am attempting to create an automatic download feature for a file from a URL with a 301 Moved Permanently redirection. Here is the current code: <a href="myserverapi/download?fileId=123" download="image.jpg" target="_blank" ...

Deciphering the intricacies of the http request

I encountered an issue while trying to send a POST request using jQuery AJAX. Upon making the request, I received the following error: XMLHttpRequest cannot load. Response for preflight has invalid HTTP status code 403 Now, I am unsure if the mistake i ...

Save the ID from the listview in the browser's localStorage

I have a listview that is generated by a loop: for(var i = 0; i < data.length; i++) { var garage = data[i]; $("#content-p").append( "<ul data-role=\"listview\">" + "<li><a href=\"#\" i ...

The ideal scenarios for employing functional setState

Lately, I've been delving into the world of React, immersing myself in tutorials and explanations on how to manipulate elements in different ways. One aspect that has caught my interest is the setState function, which allows you to update or override ...

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

Using ng-repeat to iterate over an array of strings in Javascript

I am working with a JavaScript Array that contains strings: for(var i =0; i<db.length; i++) console.log(db[i]); When I run the code, the output is as follows: dbName:rf,dbStatus:true dbName:rt,dbStatus:false Now, I am trying to use ng-repeat to ...

Trigger offcanvas modal and backdrop simultaneously using Bootstrap v5.0

Working with Bootstrap v5.0 offcanvas has been smooth sailing until I hit a roadblock. Clicking on the offcanvas button seems to be triggering both the offcanvas-backdrop and modal-backdrop divs simultaneously. <div class="modal-backdrop fade show ...

Error: Attempting to access the properties `line_items.amount`, `line_items.currency`, `line_items.name`, `line_items.description`, or `line_items` is not allowed

Hi there, I'm currently working on creating an Amazon-inspired platform and I've encountered an error while trying to integrate Stripe with the project. Can anyone provide some assistance? You can refer to the video tutorial I'm using by fol ...

What is the best way to modify a current state object without causing an endless loop of redirects?

const useCase = (argument) => { const [value, setValue] React.useState(argument) React.useEffect(() => setValue({...value ...argument), [argument, value, setValue]) } The above code is currently causing an infinite loop due to setting the stat ...

Struggling to retrieve information using the filter() method in MongoDB

I am currently attempting to retrieve the tasks assigned to a specific user using this setup router.get('/all', auth, async (req, res) => { try { const assignments_raw = await Assignment.find({listP: listP.indexOf(req.user.userId)}) ...

JavaScript throws an error because document is not defined

view image description hereWhy am I encountering an error after installing node.js and running various JavaScript commands? It seems like the issue is not with my code, but rather that node.js is failing to establish a connection with the server. view ima ...

The property length is undefined and cannot be read

I'm currently utilizing a dexi.io robot for the purpose of automating data extraction from permit databases. This particular robot has the capability to process custom JavaScript in order to dissect the incoming JSON object. While this code does func ...

initiate a POST request using fetch(), where the data sent becomes the key of

Encountered an issue with sending a POST fetch request where the JSON String turns into the Object Key on the receiving end, specifically when using the { "Content-Type": "application/x-www-form-urlencoded" } header. I attempted to use CircularJSON to res ...

Encountering the error message "The getStaticPaths function in Next.js requires the 'id' parameter to be provided as a string"

Having an issue with the getStaticPaths function. Every time I attempt to create a dynamic display using a parameter, it gives me an error message: A required parameter (id) was not provided as a string in getStaticPaths for / movies / [id]. However, if ...

Is `console.log()` considered a native function in JavaScript?

Currently, I am utilizing AngularJS for my project. The project only includes the angular.min.js file without any additional references to other JavaScript files. The code snippet responsible for sending requests to the server is as shown below: var app = ...