I'm experimenting with a very basic Angular page locally. I'm able to accomplish this on my Windows pc by running http-server. However, this stopped working today. I've gone back and reduced my pages to extremely-basic, hello-world-level code, but I still can't get any Angular functionality to work.
Does anyone know why the following page wouldn't output a basic math problem, instead of curly brackets? As I mentioned, this worked fine yesterday.
app.js:
var app = angular.module('store', []);
index.html:
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<p>{{"Hello" + " you"}}, I am {{2017 - 1985}}.</p>
</body>
</html>
UPDATE:
The error I see in Chrome DevTools is as follows (currently using AngularJS v1.6.1 ):
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=store&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4759
at q (angular.js:357)
at g (angular.js:4720)
at eb (angular.js:4642)
at c (angular.js:1838)
at Mc (angular.js:1859)
at pe (angular.js:1744)
at angular.js:32977
at HTMLDocument.b (angular.js:3314)
(anonymous) # angular.js:38
(anonymous) # angular.js:4759
q # angular.js:357
g # angular.js:4720
eb # angular.js:4642
c # angular.js:1838
Mc # angular.js:1859
pe # angular.js:1744
(anonymous) # angular.js:32977
b # angular.js:3314
You need to call Angular before you call app.js for one. JavaScript executes in sequential order.
Related
When i try to load my ui-calendar in my angular.module i am getting Uncaught Error: Injector error. How will i include my ui-calendar. I am using npm install.
This is my error:
Uncaught Error: [$injector:modulerr]
at angular.js:38
at angular.js:4408
at n (angular.js:336)
at g (angular.js:4369)
at eb (angular.js:4294)
at d (angular.js:1655)
at yc (angular.js:1676)
at Zd (angular.js:1570)
at HTMLDocument.<anonymous> (angular.js:28683)
at j (jquery.js:3148)
This is my module were i am including ui-calendar:
var ebsapp = angular.module("ebs", ['ui.bootstrap', 'angular.filter', 'toastr', 'ui.calendar']);
Or is there any other script tags that needed to be included. if so please give me the script tags.
My injector error got resolved. I want to get a full calendar view.
I am using this div code:
<div ui-calendar ng-model="eventSources"></div>
How to get a simple calendar view??
Is these are the scripts i need to load ??
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
I tried to implement form https://jsfiddle.net/yy1rud17/326/ website where in i got the following out;
Whether i need to initialise my calendar??
My question is similar to this existing question i.e. A Web project is already using - Spring MVC + Angular1.x + JSP + JavaScript etc.
Page layout is already designed with tiles technology and I have to develop a sample page - only body part i.e. I have to keep doing layout with tiles and have to reuse - header , footer , left navigation etc .
So I set up a separate Angular2 project , build it and included final JS files in layout JSP of tiles.
In my new body jsp, when I use angular2 root component , my jSP is displaying perfectly but all other pages of application are showing this below error,
core.es5.js:1020 ERROR Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2791)
at createElement (core.es5.js:9172)
at createViewNodes (core.es5.js:12146)
at createRootView (core.es5.js:12075)
at Object.createProdRootView [as createRootView] (core.es5.js:12760)
at ComponentFactory_.create (core.es5.js:9858)
at ComponentFactoryBoundToModule.create (core.es5.js:3333)
at ApplicationRef_.bootstrap (core.es5.js:4763)
at core.es5.js:4546
at Array.forEach (<anonymous>)
defaultErrorLogger # core.es5.js:1020
zone.js:654 Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2791)
at createElement (core.es5.js:9172)
at createViewNodes (core.es5.js:12146)
at createRootView (core.es5.js:12075)
at Object.createProdRootView [as createRootView] (core.es5.js:12760)
at ComponentFactory_.create (core.es5.js:9858)
at ComponentFactoryBoundToModule.create (core.es5.js:3333)
at ApplicationRef_.bootstrap (core.es5.js:4763)
at core.es5.js:4546
at Array.forEach (<anonymous>) Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.selectRootElement
This above error is on console and those other JSP pages keep working correctly and this background error affects them in no way.
This error doesn't come on JSP page where I call root component i.e. my new jsp body page.
I have included angualr2 JS files outside outside body tag at bottom.
Any suggestions to remove this error from console and if this set up looks OK?
We will set up an automated process to build and copy files from Angualr2 UI project to Spring MVC project and only those final JS files will be deployed with app.
Its an Spring MVC controller which loads the page for the first time - a JSP .
With inputs from JB Nizet from comments , I am able to resolve issue by removing angular js inclusions from common application layout JSP and putting it in body jsp file as shown below.
<app-root>Loading...</app-root>
<!-- For Angular 2 -->
<script type="text/javascript" src="inline.bundle.js" ></script>
<script type="text/javascript" src="polyfills.bundle.js" ></script>
<script type="text/javascript" src="styles.bundle.js" ></script>
<script type="text/javascript" src="vendor.bundle.js" ></script>
<script type="text/javascript" src="main.bundle.js" > </script>
I am building application with - ng build --env=prod --output-hashing none
I if I do JS inclusions before calling root component, error occurs.
I have a really weird issue with my AngularJS app on iPad / iPhone safari.
The issue occurs only of first load (after clearing history / website data).
The issue that the application wont start at all - I get a white page and the console (from MacBook develop tools) is full with errors,
Sometimes I'm getting lots of
TypeError: undefined is not an object (evaluating 'd.module')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 'd.$$minErr')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 't.noop')
ReferenceError: Can't find variable: angular
ReferenceError: Can't find variable: angular
...
Sometimes I'm getting Error: $injector:unpr - Unknown Provider
And sometimes Error: $injector:nomod - Unknown Provider
But if I hit page refresh after getting the white page / errors - all works just fine.
This is part of the third party js libs/plugins I include on my index.html
<script src="resources/plugins/head.load.min.js"></script>
<script src="resources/plugins/modernizr-custom.js"></script>
<script src="resources/lib/jquery/jquery-2.1.0.min.js"></script>
<script src="resources/lib/angular/angular.min.js"></script>
<script src="resources/lib/angular/angular-resource.min.js"></script>
<script src="resources/lib/angular/angular-route.min.js"></script>
<script src="resources/lib/angular/angular-animate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate-loader-static-files.js"></script>
<script src="resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js"></script>
<script src="resources/lib/ng-table/ng-table.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload-shim.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload.min.js"></script>
I'm really lost here...
Another thing: I have noticed on my Mac (Resources->Scripts) that if I open a file, lets say Resources->Scripts->FileNameOne.js the content is actually of another file FileNameTwo.js ??? is it a flaw of the dev tools of the Mac that confuses the names/content or can it be related to the problem???
Any Ideas?
Here is the complete solution with Grunt
Content of the Gruntfile.js
'use strict';
module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: ['WebContent/resources/plugins/head.load.min.js', 'WebContent/resources/plugins/modernizr-custom.js',
'WebContent/resources/lib/jquery/jquery-2.1.0.min.js',
'WebContent/resources/lib/angular/angular.min.js', 'WebContent/resources/lib/angular/angular-resource.min.js', 'WebContent/resources/lib/angular/angular-route.min.js', 'WebContent/resources/lib/angular/angular-animate.min.js',
'WebContent/resources/lib/angular-translate/angular-translate.min.js', 'WebContent/resources/lib/angular-translate/angular-translate-loader-static-files.js',
'WebContent/resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js',
'WebContent/resources/lib/ng-table/ng-table.min.js',
'WebContent/resources/lib/websockify/util.js', 'WebContent/resources/lib/websockify/base64.js', 'WebContent/resources/lib/websockify/websock.js',
'WebContent/resources/lib/file-upload/ng-file-upload.min.js',
'WebContent/resources/js/services/*',
'WebContent/resources/js/services/dialogs/*',
'WebContent/resources/js/controllers/*',
'WebContent/resources/js/directives/*',
'WebContent/resources/plugins/*'],
dest: 'dist/myWebAppInOneFile.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Then just call grunt from the relevant folder and you'll get your file
What build toolchain are you using. One option would be to concatenate all of the includes into a single file, this should stop the error where the wrong scripts are being loaded - As mentioned by Marcus H
Gulp
https://github.com/contra/gulp-concat
Grunt
https://github.com/gruntjs/grunt-contrib-concat
I just added those srcipt to my web page and has en error.
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-rc.1/angular-route.js"></script>
This is exact my example and it works on Fiddle.
http://jsfiddle.net/frbrn32d/2/
junk after document element main.html:6
DOMException [NS_ERROR_DOM_BAD_URI: "Access to restricted URI denied"
code: 1012
nsresult: 0x805303f4
location: https://code.angularjs.org/1.3.0-rc.1/angular.js:9032]
Check out your fiddle. I made a change and it seems to be working.
You had a typo there. It should be alert not alerT.
http://jsfiddle.net/1mjgf4u8/3/
I want to use the Wpf webBrowser control to render math equations.
I've downloaded MathJax, and included it in my Visual studio project.
I've tryed to load one of the MathJax example. This is the html code i'm using:
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script>
</head>
<body>
<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><mo>≠</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
</math>
</p>
</body>
</html>
Everything is working fine with the following code:
string curDir = Directory.GetCurrentDirectory();
this.webBrowser1.Navigate(new Uri(String.Format("file:///{0}/test-1.html", curDir)));
But if i try this code:
string s = File.ReadAllText(Directory.GetCurrentDirectory() + "\\test-1.html");
this.webBrowser1.NavigateToString(s);
i get a Script Error:
An error has occurred in the script on this page.
Line: 1
Char: 1
Error: Syntax Error
Code: 0
URL: about:MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full
What's wrong? It would be really helpful to use something similar to the last code, so i can avoid to save a file just to load it...
Note that the URL in the error is about:MathJax-Reduced/unpacked..., which is an about URL not the file:// URL that you had in the first case. I suspect that is the cause of the problem. That suggests that the NavigateToString function is using about:blank or a similar URL as the base URL for the page, so MathJax is getting the wrong path to itself. Note that you lose the actual page location when reading it from the file and loading it as a string. That means you may have to load MathJax from an absolute URL rather than a relative one (i.e., include the file:// and path to the MathJax-Reduced directory).