I'm getting error with angular JS Error: [ng:areq] Argument 'MyController' is not a function, got undefined, when trying to use bundles. However when I explicity include the app in my html using script tags it works.
Bundle Config.cs
bundles.Add(new ScriptBundle("~/bundles/myweb")
.IncludeDirectory("~/Scripts/myweb", "*.js")
.IncludeDirectory("~/Scripts/myweb/Controllers", "*.js")
.Include("~/Scripts/myweb/Controllers/myController.js")
.Include("~/Scripts/myweb/myweb.js"));
With this HTML does not work:
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
This HTML does work but I'm unsure why I have to explicitly include myApp.js since it is already included in the bundle (and when I view the bundle from F12 - Developer Tools on Google Chrome it does already include the expected code):
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
<script src="~/Scripts/myweb/myweb.js"></script>
Note the shown html is in the head of _Layout.cshtml. I'm using angularJS with MVC.
Just figured out how to fix this.
I basically need to include the following code
<script src="~/Scripts/angular.js"></script>
#Scripts.Render("~/bundles/myweb")
in both the _Layout.cshtml and the index.cshtml (I only had it in Index.cshtml)
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
My app website is not working fine on IE11.
The website is not loading, it gives me a blank page
This is the error thrown on IE11 :
SCRIPT5005: String expected
js (26,286)
SCRIPT5022: Exception thrown and not caught.
polyfills.js (3234,3)
I'm enclosing the screen capture on on the console
I have included the API in my index.html like this :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
It should include googlemaps after my polyfills.js, but I'm not sure on how to do that
I've tried to use agm-map, and others solutions but so far, nothing is working.
You could add the Google Maps script to the ngOnInit() method instead of in the tag.
let googleMapsScript = document.createElement('script')
googleMapsScript.setAttribute('src', 'https://maps.google.com/maps/api/js?v=3.38&key=YOURGOOGLEMAPSAPIKEY&libraries=places')
document.head.appendChild(googleMapsScript)
This will load the Google Maps script after the main JS for the application is loaded.
I don't use Angular but a similar approach works well in VueJS.
I had the same issue. Not Angular but same issue.
I changed the following:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>
to
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>
I just started trying ES6 and i already got stuck with ES6 modules. I use babeljs for translating ES6 into ES5. My understanding is, that babel uses requirejs module loader behind the scenes to make the import happen.
So i am trying to set up a very basic sample of module loading but i cannot get it working.
I want to import a module from bar.js into index.html. Those files have same parent directory.
index.html code:
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/babel-standalone#6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body>
<script type="text/babel">
console.log("Here we go.");
import {foo} from 'bar';
console.log(typeof foo);
</script>
</body>
</html>
bar.js code:
export function foo() {
console.log("Foo it!");
}
I get following error:
Uncaught Error: Module name "bar" has not been loaded yet for context:
_. Use require([])
Even more interesting thing happens when i change order of require.min.js and babel.min.js in the <head>. This time the text/babel script is not executed at all (no errors in console).
Could somebody, please, explain what is wrong? Or is this completely bad approach?
Please, do not suggest using bundlers like webpack. I dont want to use them yet.
I have a asp.net MVC app, and I want to start unit testing the javascript closures I use with the app. I have watched a few demo's on plural site, and played with the sample code in the github repository.
however, all the actual mocha.js examples assume I want to host with node, and that the npm system will get all of my dependencies. At this time I cannot install node.js on my laptop. the test code in the plural site courses all are horribaly orginized, and when I look at the files named "mocha.js" they actually contain the require.js code as well.
in any regards, Does anyone has a good "html" hostable template for mocha.js code, and a nice way to orginize the dependencies outside of the node npm system?
Mocha can run in the browser without having to worry about dependencies. The documentation has a section about it. As shown in the documentation, you need a page that loads and starts Mocha, and loads anything else you need:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- Load the libraries you need -->
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<!-- Tell Mocha what interface to use for the tests. You must do this
before you read the test files. -->
<script>mocha.setup('bdd')</script>
<!-- Load the test files. This is where your tests would be located. -->
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<!-- Run the tests. -->
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
I've added some comments above to indicate what is going on.