It seems like I miss running r.js over code with AngularAMD.
.when('/', angularAMD.route({
templateUrl: 'views/home.html',
controller: 'HomeCtrl',
controllerUrl: 'controllers/home',
data: {
name: 'home'
}
}))
I have the following route defined which works fine as long as I don't run r.js, but after I do I'm getting the following error,
Uncaught Error: undefined missing controllers/home
Is the name of your js file for the home controller named home.js?
If not - then you will want the controllerUrl to equal the exact name without the .js at the end. - controllers/homeCtrl or controllers/homeController - mattering if that is how you've named your controller's js file.
Related
Am getting the above error in console on loading my application. My controller looks as below.Am new to angular so any help would be appreciated
Am trying to export the datatable into excel here. I think the issue is here angular.module('myApp','datatables', 'datatables.buttons'])
What is the correct way to include them in the module?
ViewCtrl.js
angular.module('myApp',['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl')
.withButtons([{
extend: 'excelHtml5',
}
]);
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
});
Verify the console loads. If the console.log does not show and you still get the inject error, then your problem is likely the datatables and datatables.buttons. Verify that these files are added to your index.html file prior to this file.
angular.module('myApp', ['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function ($scope) {
console.log("Code of awesomeness");
});
If you find that you do see the console.log("Code of awesomeness"); Then your $inject issue is DTOptionsBuilder, DTColumnDefBuilder. Verify spelling.
I'm trying to use require.ensure in my react component:
componentDidMount() {
require.ensure([], () => {
require('public/jscripts/brightcove/index.js');
});
}
but keep getting an error: Cannot set property 'default' of undefined
It happens at this point in the brightcove videojs script:
// At this point, `window.videojs` will be the earliest-defined copy of this
// version of videojs.
var videojs = window.videojs;
// https://github.com/videojs/video.js/issues/2698
videojs['default'] = videojs;
Does anyone know why this might be happening?
The full script is here btw, I saved it as a local file hence the path public/jscripts/brightcove/index.js: https://players.brightcove.net/1752604059001/B1xXFuBodW_default/index.js
Looking for on how to bundle a library using webpack, the library link is : https://github.com/InteractiveAdvertisingBureau/Consent-String-SDK-JS/
I tried the following structure :
> /dist
> - index.html
> /src
> - index.js
> package.json
> webpack.config.js
content of :
index.html
<!doctype html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<script src="bundle.js"></script>
<script type="text/javascript">
var consentData = new CSLib();
console.log('euconsent : '+consentData);
</script>
</body>
</html>
index.js
require('consent-string');
webpack.config.js :
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
library: 'CSLib',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'dist')
}
}
after runnning npm run build the bundle.js file is generated
but when trying to access the index file, an error is occured in the browser, say that CSlib is undefined.
please your help, I would really appreciate it.
First of all, you need to bind the result of require('consent-string'); to something. I do not know the library but looking at their npm page you should be able to do the following.
const { ConsentString : CSLib} = require('consent-string');
However even if you do that it would not work due to some details of how webpack actually works. Basically each module, or rather file, is executed inside it's own scope and they do not leak to the global context. How does it do this? Allow me to demonstrate.
Webpack internals basics
Let's start with the following example file that imports jquery, prints "test", and exports something.
const $ = require('jquery');
console.log("test");
export function test() {
console.log("test");
}
Run webpack on this file and open bundle.js. You will find that it starts by defining a function as follows: function(modules). This is webpacks bootstrap function. If you really count all the brackets you will find that it is defined and then immediately called with an array of functions with the following signature function(module, exports, __webpack_require__). Each function in this array represents a module, or rather a file, that webpack has included in the bundle. You will find a module 0 which is generated by webpack. It looks like this:
/* 0 */
/***/function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ }
All it does is call __webpack_require__(1). So what does that do? __webpack_require__ is passed in as an argument to the module function that we are in but if you look inside the bootstrap function you will find that it is defined there. It works as follows
If the module with the given id (the id being an index into the array of modules that we discussed earlier) has been "installed" simply return that modules exported properties. A module has been installed if it has an entry in the installedModules array.
Otherwise, define a new module object (stores the modules id, if it has been loaded yet and it's exports) then call the module function with some arguments that I will discuss later.
Mark the module as loaded, add the module object to installedModules, and return its exports property (we will see how exports is populated in a minute).
Now let's look at how webpack has transformed the code we gave it. It can be found in module 1 (which is called from module 0 remember) and looks as follows (there might be some bookkeeping stuff in there too but I will ignore it, it's there for compatibility reasons I think):
var $ = __webpack_require__(2);
console.log("test");
function test() {
console.log("test");
}
exports.test = test;
The first line is var $ = __webpack_require__(2); This we have already discussed. It just imports jquery which is module 2 (which is why module 2 takes up most of the file as it includes all of jquery).
Then we have console.log("test");. Nothing has changed from the code we passed in.
But the function we exported has been split into two statements. First the function is defined and then it is added to exports as a property. The exports object is passed in by __webpack_require__ and it represents the properties that the module exports. It is stored in installedModules in a module object. Remember that any subsequent call to __webpack_require__ will just return the exports property of this module object.
tldr: Webpack will transform all of those fancy module based operations into calls to __webpack_require__ for imports and assignments to exports for export statements. This gives the illusion that every module exists in it's own little world.
What this means to you
Since each module is run inside it's own scope you will need to group the code that uses require('consent-string'); with the require statement. In conclusion your index.js should look like this:
const { ConsentString : CSLib} = require('consent-string');
var consentData = new CSLib();
console.log('euconsent : '+consentData);
I have a module which is dependent upon both, PhotoSwipe and PhotoSwipeUI_Default. I am requiring both modules, like so and inside of my module I am initialising my gallery. EG:
define("modules/lightboxStart", ["vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (PhotoSwipe, PhotoSwipeUI_Default) {
var StartGallery = function(){
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
}
StartGallery()
}
The gallery then works as expected but require is throwing a mismatched anonymous define module error in PhotoSwipe.js.
After looking through the docs I came to the conclusion that I need to run both scripts(PhotoSwipe and PhotoSwipeUI_Default) through the require.js API.
I then defined each, like so:
define('PhotoSwipe', function() {
//PhotoSwipe script here
return PhotoSwipe
})
And
define('PhotoSwipeUI_Default', function() {
//PhotoSwipeUI_Default script here
return PhotoSwipeUI_Default
})
This then eliminates the mismatched anonymous define module error I was getting earlier, but I am getting this error now instead:
PhotoSwipe is not a function
How could I fix this? I am essentially trying to access the PhotoSwipe function within PhotoSwipe.js and pass through my arguments but I am unable to do so without generating a load of js errors on the page and I can not figure out why.
Help much appreciated!
define( ["modules/lightboxStart", "vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (lightboxStart, PhotoSwipe, PhotoSwipeUI_Default) { //i think so}
I am just trying to get started with node-webkit however when I try to use require() I get the error [60904:0624/190000:INFO:CONSOLE(92)] "Uncaught AssertionError: missing path", source: assert.js (92). I am starting up node-webkit with the following command ./node-webkit.app/Contents/MacOS/node-webkit . My package.json looks like this
{
"name" : "nw-subset",
"main" : "Subset.html",
"window" : {
"toolbar" : true,
"frame" : true
}
}
I have tried just running require('os') and window.require('os') and both give me the same error.
I encountered a similar error. For me, the issue was that I also had ace.js loaded, which also assigns a global require function.
To solve this, you can add the following code snippet: (source)
<script type="text/javascript">
window.requireNode = window.require;
window.require = undefined;
</script>
in the head of your main html file. Then just use requireNode instead of require.