Hey after installing angular i made a simple routing script and for some reason the console is saying there is an error in the angular.min.js and i do not know why becuse i got it directly from the anularjs.org website. The console is showing this error.
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=englishHosts&p1=Err…
localhost%2Fvendor%2Fbuild%2FAngularJavascript%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4683
at q (angular.js:325)
at g (angular.js:4644)
at eb (angular.js:4566)
at c (angular.js:1803)
at Ic (angular.js:1824)
at ue (angular.js:1709)
at angular.js:32379
at HTMLDocument.b (angular.js:3251)
My index.html has
<!DOCTYPE html>
<html lang="en" ng-app="englishHosts">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="../vendor/libs/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendor/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="../vendor/build/AngularJavascript/angular.min.js"></script>
<script src="../vendor/build/AngularJavascript/angular-route.min.js"></script>
<script>
var app = angular.module("englishHosts", ["ngRoute"]);
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This error still occurs without the app.js. Any help would be helpful.
There is a 'modulerr' error because you don't define the module englishHosts.
Your app.js must contains something like this:
angular.module('englishHosts',[]);
And don't forget:
<script src="app.js"></script>
This appears in the http link : http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=englishHosts...
(look at the p0 parameter in the url)
If you follow this 'error link', you will have some details.
I think the error you are seeing is because you are defining in the html
<html lang="en" ng-app="englishHosts">
and it cannot find the module called englishHosts
// When this is commented out it will throw an error because it cannot find the module declared in the html !
// var app = angular.module("myApp",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" >
</div>
{
"message": "Script error.",
"filename": "",
"lineno": 0,
"colno": 0
}
Related
Getting this error in the Devtool(Console).
Error handling response: TypeError: self.processResponse is not a function
Issue Solved: It seems like due to the (What runs) chrome extension, this issue is occurring.
just by simply deactivating WhatRuns chrome extension, resolved the issue for me.
Had the same issue running a site internally. Seems like that extension needs to be updated.
Error handling response: TypeError: self.processResponse is not a function
at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10
and this references index.html line 1 as the source of the error pointing back to the notification.js file called by that extension.
and this was on a bare html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Debug Challenge</title>
</head>
<body>
<!-- <script src="/part-1.js" type="text/javascript"></script>-->
<!-- <script src="/part-2.js" type="text/javascript"></script>-->
<!-- <script src="/part-3.js" type="text/javascript"></script>-->
<!-- <script src="/part-4.js" type="text/javascript"></script>-->
<script src="/part-5.js" type="text/javascript"></script>
</body>
</html>
I have reached the final point with one error remaining to construct a sample dashboard with charts using dc.js. I have encountered an error.
Unexpected token < on line 1 for loadash.js.
loadash.js is valid but for somehow Chrome shows it in my root app directory next to index.html and has the exact copy of the source content as my index.html. In other words, my loadash, has html content in it. I am running this app inside AngularJS.
What is going on here, and how do I fix this?
Script Tags at bottom of index.html above closing body tag
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/js/universe/src/lodash.js"></script>
<script src="/app/app.js"></script>
index.html Snippet
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
Actual correct loadash.js file
Non actual loadash.js file showing up in Chrome (contents are the html of my home page and AngularJS url is localhost/loadash#!/main, why is this loadash in my url???)
Replacing './lodash' with './app/js/universe/src/loadash' so that I use absolute paths instead of "relative" path since AngularJS thinks ./loadash is /loadash#! for some reason I don't know why.
Top of universe.js file
'use strict'
var module;
var _ = require(['./app/js/universe/src/lodash'], function(module){
});
and commenting out <script src="/app/js/universe/src/lodash.js"></script>
like so
at the bottom of index.html
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<!--script src="/app/js/universe/src/lodash.js"></script-->
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/app.js"></script>
Eliminated all errors present!
I am doing Bucky Robert's (The New Boston) tutorial on React (hyperlink in the code below).
I'm stuck at the beginning, with just trying to install/load React with the tag instead of using local files. I get two error messages:
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
I bet my problem is pretty basic, but I spent a lot of time trying to figure out what's going on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--The tutorial that I'm trying to do https://www.youtube.com/watch?v=2NLgQMs2hOw&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA&index=2-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Basically, I just want to know what the non-buggy version of my code would be so I can do the tutorials.
Your script element doesn't contain regular JavaScript and you omitted the type attribute to show what it does contain.
After searching on the Internet and asking other people, here is what I found.
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
This issue is related with tags I provided. I was able to solve the problem by using this instead:
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
As was pointed out: I was missing the "marking" of the code with
<script type="text/babel">
Here is the full code, without the two bugs I had:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--https://reactjs.org/docs/add-react-to-a-website.html-->
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"> </script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
b.js:
const x = 1;
export {x};
a.js:
import {x} from 'b'; // <<-- ERROR
console.log(x);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js"></script>
</body>
</html>
Error:
Uncaught SyntaxError: Unexpected token {
I'm using WebStorm and running the project in Chrome in Win7.
Update:
I changed index.html content to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="a.js" type="module"></script>
</body>
</html>
Error:
Uncaught TypeError: Failed to resolve module specifier "b". Relative references must start with either "/", "./", or "../".
It seems that b.js is not loaded.
To use ES6 modules, you have to load the script using type="module" - this ensures that browsers that do not understand ES6 modules won't choke on it
Next, to import, you must specify path and full filename of the imported file
See comments in code
b.js
const x = 1;
export {x};
a.js
// specify the path and full filename below
import {x} from './b.js'; // <<-- NO ERROR NOW
console.log(x);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- add type="module" -->
<script src="a.js" type="module"></script>
</body>
</html>
I have a very basic AngularJS app, from which I am trying to resolve the below error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=HelloWorld&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
All the online references I have found lead to correcting improper use of ng-app in one way or another, however I find that my code is as close as vanilla and correct as it can possibly get.
So being that this is a basic issue and I cannot seem to find the solution for it, could anyone please enlighten me as to the obvious mistake?
JavaScript
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
If you are trying to make this example in plunkr for example, don't forget to reference your script file, script.js.
Check here.
I added <script src="script.js"></script>. Without it I get the exact error you describe. Basically Angular can't find a corresponding module declaration for the ng-app="HelloWorld" application.
So don't forget to include your actual application JS, containing the angular.module part.
You get this error since you are using ng features before importing Angular and you are not importing the file where you initialize your app module.
Do as shown below:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
</body>
</html>
App.js:
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
I hope I've been helpful.