My angularjs project works fine with requirejs.
I want to use the nggrid tables but somewhere the bootstrapping is not happening correctly and i am getting the "ReferenceError: jQuery is not defined" in ng-grid.debug
Here is my configuration:
app.js : Adding ngGrid module as the dependent module
angular.module('MyApp', ['controllers', 'services',
'filters', 'directives', 'ngGrid']);
main.app: i already see Jquery being a dependency which should have been loaded loaded
require.config({
paths: {
jquery: 'vendor/jquery',
angular: 'vendor/angular.min',
domReady: 'vendor/domReady'
},
shim: {
angular: {
deps: [ 'jquery'],
exports: 'angular'
}
}
});
require([
'angular',
'app',
'domReady'
'vendor/ng-grid.debug'
In my experience, every time this error is thrown is because of the order you import the libraries. When I got this error, I had imported the ng-grid library with the other angular libraries, which was before jquery. Make sure it comes after both.
Not only does the order of the libraries matter also if you are using Visual studio MVC & web API the
#Scripts.Render("~/bundles/jquery") does not import the JQuery library immediately
Solution
Use the script tag and this will work out just fine
Example:
Mine scripts in my layout:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"> </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="~/Scripts/ng-grid.js" type="text/javascript"></script>
Related
this the content of my /laravel/webpack.mix.js :
mix
.js([
'resources/assets/js/jquery.js',
'resources/assets/js/plugin.js'
], 'public/js/my_app.js');
The content of /resources/assets/js/jquery.js is :
window.$ = window.jQuery = require('jquery');
The content of /resources/assets/js/plugin.js is the local code written like this :
(function($) {
// plugin script
})(jQuery);
When the plugin.js script is written locally (as above), it is loaded BEFORE jQuery in my_app.js (e.g plugin.js THEN jQuery)
BUT
when I extract plugin.js with "require" or "import" instruction directly from
node_modules**, e.g require('plugin') written in plugin.js, the order is OK :
jquery.js is loaded first THEN plugin.js.
My question:
I want to load jquery.js BEFORE plugin.js.
So, How to do to respect the order EVEN when the plugin.js is a local script?
Laravel mix provides feature where you can extract vendor libraries to vendor.js. But you have to make sure your application code app.js is called after your vendor.js.
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
Reference - https://laravel.com/docs/5.4/mix#vendor-extraction
After the .extract call, add
autoload({
jquery: ['$', 'jQuery', 'window.jQuery']
});
So,
mix.js(...).extract(...).autoload(...);
Edit : just saw your response that you tried this
I have configured paths for handlebars and underscore in Requirejs config like so:
require.config({
baseUrl: '/js/',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
}
This is how I initialize requirejs:
<script type="text/javascript" data-main="/js/main" src="/js/libs/require/require.js"></script>
When i refresh the page multiple times, I get an error message saying:
Uncaught Error: Script error for "handlebars".
Digging a little deeper, I could see in the network tab of Chrome Dev tools that it's basically a 404 not found for the modules:
404 Not Found - http://localhost:8888/js/underscore.js
The above path is not the one configured in require.config.
I'm not able to exactly pinpoint the issue as this occurs only intermittently.
Any help is much appreciated.
Thank you.
Backbone.js needs underscore.js so if you refresh the page multiple times the libraries may not be loaded with the correct order
Please try shim configuration as below;
require.config({
baseUrl:'js',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
},
shim:{
'backbone': {
deps: ['underscore']
}
}
}
Have require js working fine without the bundles. But whenever i use a bundle, i get timeouts for the modules i am trying to import.
Here is how i build the bundles with the asp.net mvc bundler/minifier
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
Heres is the require js config in the cshtml file:
<script>
require.config({
baseUrl: "/scripts",
paths: {
jquery: "jquery-1.11.2"
},
waitSeconds: 20,
shim: {
bootstrap: {
deps: ['jquery']
}
},
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
}
});
require(["app/main/test"]);
</script>
And the js for the page (app/main/test):
require(['jquery', 'moment'], function ($, moment) {
console.log(moment().format());
});
Jquery, bootstrap and moment libraries are in the test bundle i have created, but i get load timeouts loading the page for moment.
Here's the chrome inspector error:
Any ideas?
thanks in advance.
This is happening because you are not requiring your bundle at all. Your require call has only jquery and moment. You have provided jquery file path, so requirejs uses that path to download and provide jquery module. But since there is no path definition for moment, it is only part of the bundle that you have created. So requirejs tries downloading moment by its module name as path and thus throws an error.
A simple fix for this is to require bundle itself.
require(['#Scripts.Url("~/bundles/test").ToString()'], function(bundle){
//At this point jquery, moment and bootstrap will be loaded.
});
You can choose to use jQuery, moment from global namespace in above example directly or you can try requiring them seperately in below example. I am not sure, but you may get into error with below example because of cyclic dependency.
require(['#Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){
//At this point jquery, moment and bootstrap will be loaded.
});
Just remove 'jquery' from your bundles
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
}
...
You already have it specified in the paths
paths: {
jquery: "jquery-1.11.2"
},
It seems require.js maps the modules to bundles so that once a module that is part of a bundle is loaded, that bundle is not loaded again.
I use the Require.js "AMN" to load my files, this is my HTML file.
<script data-main="js/main.js" href="js/require.js"></script>
when i load my main.js - i made this config to load my jquery file.
require.config({
baseUrl: 'js',
paths: {
"jQuery":'lib/jquery-1.9.1.min'
}
});
require(['jQuery'], function ($) {
console.log($);
})
But i am not getting any console. all my paths are correct.
my index.html file located at the parent of the js filder.
Help me to resolve this.
jQuery module for AMD should always be lowercase. Check what path is used when browser requesting files using developer tools in chrome or fiddler. This way you will know if you configured it right.
UPDATE: please correct the syntax for loading script. Must be src instead of href.
<script data-main="js/main.js" src="js/require.js"></script>
How do I require the jquery AMD module for my TypeScript module. For example let's say directory structure for scripts looks like this:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
I want the generated js file from module.ts to require jquery-1.8.2.js be loaded via require.js.
Currently I have:
import jquery = module('jquery')
This results in The name "jquery" does not exist in the current scope.
FOR TYPESCRIPT 1.7+
It looks like standard is changing again, where the below 0.9+ method still works, but with ES6 coming the following module loading could be used. (reference: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105)
import * as $ from "jquery";
and even partial ones
import {extend} from "jquery";
(this still require the jquery.d.ts, if tsd is installed - tsd install jquery)
to install tsd: npm install tsd -g
FOR TYPESCRIPT 0.9+
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
And also, if your jquery.d.ts do not define a external module, add the following to jquery.d.ts:
declare module "jquery" {
export = $;
}
I think a lot of the confusion around this is due to jQuery not really acting like an External Module, which inhibits the use of an import statement. The solution is quite clean, simple and elegant enough to not feel like a work-around.
I have written up a simple example of Using RequireJS and jQuery in TypeScript, which works as follows...
You grab the type definitions from Definitely Typed for RequireJS and jQuery.
You can now use raw RequireJS with static typing inside of the TypeScript file.
app.ts
///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />
require(['jquery'], function ($) {
$(document).ready(() => {
alert('Your code executes after jQuery has been loaded.');
});
});
And then you only need to add the single script tag to your page:
<script data-main="app" src="require.js"></script>
Benefits over other solutions?
You can update jQuery and RequireJS independently
You don't have to rely on shim project being updated
You don't have to manually load jQuery (or anything else that isn't "like a module" that you have a .d.ts file for)
Take the basic jquery.d.ts from the TS source (TypeScriptFile)
Move the () declarations from the JQueryStatic into a module like this:
in your code module import the jQuery:
import $ = module("jquery");
declare module "jquery" {
export function (selector: string, context?: any): JQuery;
export function (element: Element): JQuery;
export function (object: { }): JQuery;
export function (elementArray: Element[]): JQuery;
export function (object: JQuery): JQuery;
export function (func: Function): JQuery;
export function (): JQuery;
}
Compile your module as AMD (tsc --module amd my_code.ts)
Use requirejs to compose your app on the client side with the following config section:
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
First get the (require-jquery) from the official github repo. After this your directory will look like:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Currently the easiest way to work with JQuery and AMD modules on TypeScript is to write the following on the main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
And call it from your test.html:
<!DOCTYPE html>
<html>
<head>
<script data-main="main" src="require-jquery.js"></script>
</head>
<body>
<h1>TypeScript JQuery AMD test</h1>
</body>
</html>
Hope this helps!
You reference external modules by path and filename (minus the .js extension), or just by filename if they are global. In your case, you should do this inside of module.ts:
import jquery = module('./jquery-1.8.2');
Remember to compile with --module AMD since by default you'll get code that uses the commonjs require function.