So I can see that the file was loaded properly from the dojoConfig reference but, when I attempt to use the module its 'undefined' any suggestions:
Updated: This will load the file, but when I throw the variable into a console nothing comes out. When inspecting it, I see a lot of text instead of the array of objs I placed inside.
index.html:
<script>
dojoConfig = {
tlmSiblingOfDojo: true,
async: true,
parseOnLoad: false,
packages: [
{ name: "main", location: "/components/3.6compact/js/dojo/dojo/main"},
{ name: "jquery", location: "/scripts/libs", main: "jquery"},
{name: "jam", location: "/scripts/mylibs", main: "lod"}
]
};
</script>
<script src="/components/3.6compact/js/dojo/dojo/dojo.js"></script>
<script src="/scripts/app.js"></script>
lod.js:
define([], function(){
var lod = [{
'level': 0,
'resolution': 156543.033928,
'scale': 591657527.591555
}, {
'level': 1,
'resolution': 78271.5169639999,
'scale': 295828763.795777
}
];
return lod;
});
app.js:*
require(['jam'], function(jam){
console.log(lod);
});
It's hard to provide an example on something like jsfiddle where we can't specify resources by file path, but I think the problem is with the module id in your javascript. In your dojoConfig, the location property defines the path to the directory where modules in that package can be located.
If your lod module is located at in /scripts/mylibs/lod.js, then you'd need to require lod/lod:
require(['lod/lod'], function(lod) {
console.log("lod module:", lod);
});
Here's the documentation for dojo config. I would look at the "Loader Configuration" section.
I attempted a jsfiddle anyway, which could be useful: http://jsfiddle.net/tupton/ftN6h/
Note the errors in the console:
'lod':
GET http://fiddle.jshell.net/scripts/mylibs/LOD.js 404 (Not Found)
and 'lod/lod':
GET http://fiddle.jshell.net/scripts/mylibs/lod.js 404 (Not Found)
I'm not familiar with the "main" property of the package config, but it looks like that's what it's using when you try to require an entire package. Maybe try changing that to "lod" so it looks for ".../lod.js"?
Related
utility.ts
let books = [
{ id: 1, title: "the dark window", author: "krishna", available: true },
{ id: 2, title: "naked eye", author: "sydney", available: false },
{ id: 3, title: "half girlfriend", author: "chetan", available: true },
{ id: 4, title: "make my dreams", author: "salam", available: false }
];
export { books };
main- app.ts
import {books} from './utility';
let getAllBooks = (): void => {
books.filter((val) => {
console.log(val.author);
})
}
How can I access the getAllBooks functiion in a Html page?
If I don't use export and import it works perfectly fine but I have to use it instead of writing everything into one file.
Please advice [using amd module] to generate one JS file as output [main.js].
Getting the below error in the chrome console.
[(index):13 Uncaught ReferenceError: getAllBooks is not defined
at HTMLInputElement.onclick ((index):13)]
My html page
<html>
<title>Welcome</title>
<head>
<script data-main="./js/main" src="./js/require.js"></script>
<script src="./js/main.js"></script>
<body>
<div id="mytest"></div>
<input type="button" value="Click!" id="btnClick" onclick="getAllBooks();" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</head>
</html>
main.js
define("utility", ["require", "exports"], function (require, exports) {
"use strict";
let books = [
{ id: 1, title: "the dark window", author: "krishna", available: true },
{ id: 2, title: "naked eye", author: "sydney", available: false },
{ id: 3, title: "half girlfriend", author: "chetan", available: true },
{ id: 4, title: "make my dreams", author: "salam", available: false }
];
exports.books = books;
});
define("app", ["require", "exports", "utility"], function (require, exports, utility_1) {
"use strict";
let getAllBooks = () => {
utility_1.books.filter((val) => {
console.log(val.author);
});
};
});
//# sourceMappingURL=main.js.map
Update browser to recent one (recent enough to support ES2015 module)
Change tsconfig.json target to es2015
Change tsconfig.json module to es2015
Always add .js extension to your import statements
Use an http server like live-server to avoir CORS concerns with file:// protocol
BONUS: Explicitly set tsconfig.json moduleResolution to node. This is not necessary if you don’t use external libraries or #types/* packages.
See it altogether at : https://github.com/SalathielGenese/ts-web
Disclosure : I'm its author.
Browsers do not yet support javascript modules. Until they do you will need to include browserify into your development workflow. Browserify concatenates your modules into a browser friendly bundle.
Browserify is very simple to get working in a typescript workflow. If you are feeling adventurous you can look at other bundlers like WebPack, Rollup or SystemJs.
Note, this is not specific to TypeScript. When developing any modern javascript (es6 or CommonJS modukes) you will need to bundle modules for the browser.
Im new to AMD but it looks like you only define the modules, never invoke/import them to the sites scope.
In this tutorial the author has a bootstrapping file that acts as entry point for an app which seems to be what you're missing: http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/
I think the title is incorrect and what you really trying to do is running TypeScript applications in te browser which is totally different yo "Run TypeScript in the browser, right?
In that case to get started with TypeScript I recommend you to not use require.js add instead a bundler-like tool like a tool like parcel, webpack, browserify, rollup. parcel is super easy : For your example, 1) remove ALL script tags and add only the following: <script src="my/app.ts"> then "compile" that html with parcel theFile.html or build for production : parcel build theFile.html
if I was right, could you please change the title of this question since is confusing and misleading ? thanks.
Now, on the other side, If you really want to run TypeScript as the title say, typescript is fully compatible with the browser (the .js file library is node_modules/typescript/lib/typescript.js ). just import it as another module or load the file in a script tag and use the Compiler API..
This project contains my research on the topic with several working examples and demo apps and some tools: https://github.com/cancerberoSgx/typescript-in-the-browser
Working on a project that gets its content with ProtoBuff. Made it work once with the loading of the JavaScripts in the HTML. Now refactoring to use requirejs to load the scripts. But when I try to use the scripts, it gives an error telling me the scripts are not loaded.
Require.js is loaded in the index.html
Bower is used to manage dependencies.
I am pretty sure I am missing a (simple) thing here, hope some one can help.
requirejs.config({
long : "long",
ByteBuffer : "ByteBuffer",
ProtoBuf : "ProtoBuf"
});
requirejs([ "long", "ByteBuffer", "ProtoBuf" ],
function( long, ByteBuffer, ProtoBuf ) {
});
the files long.js, ByteBuffer.js and ProtoBuf.js are all in the same map as the App.js, where this is called.
*While this question about requirejs and ByteBuffer looks promising, I think I am missing something here.
This does work, the functions in those files are accessible within the rest of the scope:
requirejs([ "otherPage", "differentPage" ],
function( util ) {
});
You need to make sure you have requirejs hooked up correctly and that you have the relevant proto library loaded.
You can use bower to manage dependencies. Install bower and
bower install long byteBuffer protobuf requirejs-text requirejs-proto
The final code can then look something like this:
require.config({
paths: {
'Long': '../../bower_components/long/dist/Long',
'ByteBuffer': '../../bower_components/byteBuffer/dist/ByteBufferAB',
'ProtoBuf': '../../bower_components/protobuf/dist/ProtoBuf',
'text': '../../bower_components/requirejs-text/text',
'proto': '../../bower_components/requirejs-proto/proto'
},
proto: {
ext: 'proto',
convertFieldsToCamelCase: false,
populateAccessors: true
}
});
require(['proto!test'], function(builder) {
var pack = builder.build('pack');
var Message1 = builder.build('pack.Message1');
});
require(['proto!test::pack.Message1', 'proto!test::pack.Message2'], function(Message1, Message2) {
...
});
some code from https://www.npmjs.com/package/requirejs-proto
I use dojo 1.8.6 and socket.io 0.9.16, after I load socket.io.js client, dojo.require conflict is happened and no more dojo module can load.
require([ 'socket.io/socket.io' ]) cause error.
TypeError: Cannot read property 'push' of undefined
I can't use "dojox/socket" for some reason.
Anybody have any idea?
As of dojo 1.11 the following is working fine:
packages: [
"dojo",
{name: "socketio", location: "/socket.io", main: "socket.io"}
]
with module loading:
define([
"socketio"
], function (socketio) {
var socket = socketio();
});
I assume its working in prior versions as well but i have not tested it.
Alternatively you could directly refer to the socket.io module as it is AMD compliant.
define([
"/socket.io/socket.io.js"
], function (socketio) {
var socket = socketio();
});
Unfortunately the builder does still report an 311 error (missing dependency) hence not breaking the build. Can't work around this as there is no package.js where to mark as copy only...
The require statement needs to be a valid AMD mid (module identifier).
Usually, people will add the package to their config, e.g.:
var dojoConfig = {
packages: [
{name: 'socketio', location: 'path/to/socket.io/socket.io'}
]
}
and then require it:
require(['socketio'], function (socketio) {
// do something with socketio
});
As far as why you cannot use dojox/socket, I don't see any code to comment on. You might also want to check out https://github.com/bryanforbes/tube , which is a draft of a replacement for dojox/socket.
When creating a new project, I have selected to include the dojo toolkit. I can import dojo.js using src="dojo/dojo.js". However when I try importing some other modules such as dijit.js using
require(["dijit/dijit"], function(){})
...I always get an error in the web console (ie the resource is not found). The problem is not applied when I import dojo modules. How can I fix this?
Make sure, you have configured Dojo correctly, kindly find the Dojo configuration which I have been using in my Hybrid App.
<script>
var dojoConfig = {
baseUrl: "js",
packages: [
{ name: "dojo", location: "dojo/dojo"},
{ name: "dijit", location: "dojo/dijit"},
{ name: "dojox", location: "dojo/dojox"}
],
isDebug: false,
async: true,
parseOnLoad: true,
deps:['app/main']
}
</script>
If you still not able to resolve it, try to make a sample use case or jsfiddle, would look into it further.
You made simple mistake of syntax:-
To require js file instead of require[("dojo/parser")]
you have use require(["dojo/parser"],function(parser){})
In our Dojo system, we have something like the following specified in our dojoConfig:
packages: [{
name: "myWidgets",
location: "/js/libs/widgets"
}]
So that in our require statements, all we have to do is something like:
require(["myWidgets/myCalendarWidget"....
The problem is when I run the build, this dojoConfig is not available and I get numerous missing dependency errors because 'myWidgets' isn't defined according to the build profile.
Now, I've tried adding a package block to the build profile also, but the end result of that is to create an actual 'myWidgets' package, which I don't want.
So, is there any way to make the build see the definition of the 'myWidgets' alias, yet have the end result of the build output still mirror the regular file structure (i.e. /js/libs/widgets)? I tried to define these path aliases in the defaultConfig element in the build profile and that doesn't work either.
If you are using a profile, you can specify the packages in the profile
/util/buildscripts:./build.sh profile=../../../myProfile.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#profile-basics
You can also specify a javascript file that holds the dojoConfig
/util/buildscripts:./build.sh --dojoConfig ../build/examples/dojoConfig.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#using-a-package-configuration
Answer to your comment. The path is relative from where dojo.js is.
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
paths: {
"evf": "../../evf"
}
};
My directory structure looks like
js/dojo-1.8.0
dijit
dojo <-- contains dojo.js
dojox
util
js/evf
myCustomWidget.js