AngularJS: Injector modulerr error on skeleton application - javascript

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.

Related

Getting Uncaught ReferenceError: exports is not defined

I am taking an input value from one page and on clicking a button I want to display it on another page in HTML.
I have exported my onclick function from one ts file and imported it in another.
Here's my TypeScript code for exporting:
var txt: HTMLInputElement=<HTMLInputElement>document.getElementById("text");
var dis=document.getElementById("dis")
export function send(){
return txt.value
}
here's the HTML for the same:
<!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>Document</title>
<link rel="stylesheet" href="menu bar.css">
<script src="cart.js" defer></script>
</head>
<body>
<input type="text" name="Number" id="text">
<button onclick="send();"></button>
<p id="dis"></p>
</body>
</html>
The importing page HTML is this:
<!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">
<script src="import.js" defer></script>
<title>Document</title>
</head>
<body>
<p id="display"></p>
</body>
</html>
And here's the TypeScript for it:
import { send } from "./main/cart";
var p =document.getElementById("display")
p.innerHTML+=send()
But I am getting Uncaught ReferenceError: exports is not defined
Most browser support commonjs modules. So you need to compile using babel if you code like that.
Here you can either use babel or write below codes.
module.exports = function send(){ //codes };
And import as....
let send = require("./main/cart");
Other code remains the same.

powershell parser html5 site

I need to log on site, and parse info.
I am trying to do this: powershell invoke-webrequest to log into website
But I can not find the form...
If I use function view page source in the browser I see only:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#ffffff"><link rel="icon" href="/frontend/favicon.ico">
<link href="/frontend/css/99.ad9d8c.css" rel="stylesheet"><link href="/frontend/css/style.aa5ad6.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script src="/frontend/js/modules/vendors~index.ad9d8c.chunk.js"></script>
<script src="/frontend/js/index.275be7.bundle.js"></script>
</body>
</html>
Update
I am try next, but this not work for me.
$ieObject = New-Object -ComObject 'InternetExplorer.Application'
$ieObject.Navigate('http://XXX.XXX.XXX.XXX:8090/frontend/login')
$currentDocument = $ieObject.Document
$currentDocument.IHTMLDocument3_getElementsByTagName("input") | Select-Object Type,Name
Error
You cannot call a method on a null-valued expression.

Basic installation of React using the <script> tag

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>

TweenMax GSAP not animating, only works in codepen?

Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.

Foundation data-alert box won't close

I am using the zurb foundation and all is working well except for data-alert. I am unable to close data-alert with the X. In other posts, people say to add the $(document.foundation(); again after the data-alert div. I have tried it with and without the second initialization. Here is the code.
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div data-alert class="alert-box alert radius hide-for-print">You can't close this!!!×</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I would appreciate any help I can get on this.. Thanks.
The data-alert was not closing because modernizr wasn't included in your project.
DEMO
Mostly this kind of errors you can solve by checking the console.
In console, It was showing the following error:
ReferenceError: Can't find variable: Modernizr
Because foundation.min.js required modernizr to work

Categories