system.js fail to properly display error messages from babel - babeljs

When I setup a very simple project with jspm using system.js and babel, it seems that the error messages are not correctly displayed.
I did the following :
npm init; press enter a bunch of times
jspm init; press enter a bunch of times
And added two files :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="jspm_packages/system.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script type="text/javascript">
console.log('test 1');
System.import('main');
</script>
</head>
<body>
</body>
</html>
main.js
console.log('test2);
// ^ I voluntarily forgot the ' to show the error;
According to this talk, and previous experiences with babel, I should see some very nice syntax error messages, like this one :
But instead, I got this, which is completely cryptic, and doesn't help me a bit :
Because of the error line saying system.js:1:0, I believe the error happens in system.js, and it fails before calling babel.
Moreover, I noticed es6-module-loader isn't loaded. I thought it was used in system.js.
I don't see what I am missing here.

Related

Configuring URL parameters in run configurations

My team is migrating to SAP BAS from SAP Web IDE. But when making run configurations I could not find how to configure something important to us: where to configure URL parameters like we could in the Web IDE.
I've consulted several pieces of SAP documentation such as this guide, but came away empty handed. The UI5 CLI also doesn't seem to offer anything interesting in this regard.
Does anyone know whether configuring URL parameters in run configurations is still possible, if necessary in the raw corresponding .env files?
Thank you in advance,
Joshua
I don`t know if you found yet how to do this but in any case, the solution that i found was to modify the Index.HTML file called and put a little piece of Script code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXTRATOCLIENTE</title>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-resourceroots='{"br.com.araguaia.EXTRATOCLIENTE": "./"}'
data-sap-ui-compatVersion="edge" data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
<script>
var oStartupParameters = jQuery.sap.getUriParameters().mParams;
var oComponent = sap.ui.getCore().createComponent({
name: "br.com.araguaia.EXTRATOCLIENTE",
settings: {
componentData: { startupParameters: oStartupParameters }
}
});
new sap.ui.core.ComponentContainer({
component: oComponent
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
After that you can put some parameter on the url like this :
index.html?Kunnr='123'&Kkber='ACRA'
Renan Pacheco
I also found a quick-and-dirty way to run with URL parameters. Run configurations are saved in the .vscode/launch.json file. In that file, there's an args array associated with each run configuration with a mention of the index.html file of your project. You can manually append your desired URL parameters to it.
There is a package.json which is created when you create any application.
It contains the script to start. You can add your URL parameters here.

How to add plugin to Ionic 2 Plunker

Hi I have the following Plunker for Ionic 2.
Ionic 2 Environment
I would like to add the Angular 2 Flex Layout(link below) to this plunker so that I have access to it on the home.html. How would I go about this?
Angular Flex Layout
Many thanks in advance.
My index looks like:
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.ios.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
This specific plunker is actually pretty out of date for both angular and ionic. Unfortunately there doesn't seem to be one since 2.0 went stable let alone the 4.0 current branch.
You may get it to work with that somehow but I don't think it would be a good testing/example tool.
Update: I went ahead and got one working with blank settings. You can see it here: http://plnkr.co/edit/y8R0MF?p=info
And Here it is with Flex-Layout running
To add plugins you have to add them to the systemJs config with the path to the umd like:
'#angular/compiler': 'npm:#angular/compiler#4.1.2/bundles/compiler.umd.js',
which is a path to the unpacked version
Hope that helps!

GWT inject jQuery script after page load

I have html page with script file custom.js that is bootstrap for GWT
<!DOCTYPE html>
<html>
<head>
<!-- -->
<script type="text/javascript" src="login/login.nocache.js"></script>
<script type="text/javascript" src="common/js/custom.js"></script>
</head>
<div id="gwt-inject-place"/>
</html>
And that is ok, all works fine.
But in custom.js there is function that I need to fire after login/login.nocache.js inject some html in <div id="gwt-inject-place"/>. Normally custom.js is somehow run before injection take place.
So what should I do to inject JavaScript jquery file?
alert('global');
jQuery(document).ready(function ()
{
alert('inner');
}
This inject custom.js but only global alert shows.
public void onModuleLoad(){
RootPanel.get("gwt-inject-place").add(view);
ScriptInjector.fromUrl("../common/js/custom.js").inject();
}
From Google Docs :
<script src="js-url"/>
Automatically injects the external JavaScript file located at the location specified by src. See automatic resource inclusion for details.
So, You have to place the injection on module.gwt.xml
further Info: Link

Uploadify in Zend Framework

I use uplodify to upload files in zend.
<link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/uploadify/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '/uploadify/uploadify.swf',
'script': '/upload/upload',
'cancelImg': '/uploadify/cancel.png',
'folder': '/uploadify/uploads',
'auto': true
});
});
</script>
<input id="file_upload" name="file_upload" type="file" />
This code is in view part index.phtml.
But when i run my web application i see in my web devloper tool it shows in console
NetworkError: 404 Not Found - http://localhost/upload/uploadify.swf?preventswfcaching=1317192234400
Help me to solv this problem....
"Some of the option names have changed in v3 to be more intuitive. The 'uploader' option should now point to the php script. The 'swf' option will point to the flash file. "
http://www.uploadify.com/forums/discussion/7296/uploader-being-rewritten-in-v3.0.0/p1
part of code:
$("#gallery").uploadify({
id : jQuery(this).attr('id'),
langFile : 'http://www.static-xxx.nu/uploader/uploadifyLang_en.js',
swf : 'http://www.static-xxx.nu/uploader/uploadify.swf',
uploader : '/uploadify/galleri.php',
The path specified is wrong somewhere.
In jquery function, it is given as;
'uploader': '/uploadify/uploadify.swf',
Check from where request is going for "upload/uploadify.swf" to get a 404 error.
also, if you are using a .htaccess file, make sure the request for these files are not denied.

Can I use Coffeescript in client side too?

Is there any way to use CoffeeScript in client side?
There are two ways:
Compile the CoffeeScript to JavaScript and deploy it as you would any JavaScript file, or
Use coffee-script.js, which allows you to put <script type="text/coffeescript> tags in your page.
The latter isn't recommended for production use, but it's nice for development. Or for usage in online editors like these:
<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>
<script type="text/coffeescript">
console.log 'Hello World!'
</script>
See the related question: Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?
See also Webmake plugin for CoffeeScript -> https://github.com/medikoo/webmake-coffee
It allows you to organize coffee modules in Node.js style and bundle it for browser. It provides source maps support, so you can debug CoffeeScript files as they are, directly in a browser.
To not compile everytime you can use -w param and coffee will compile the file everytime file change
coffee -wco src/ public/js
Yes, it can be done by adding a CoffeeScript src tag to the head section of your html page.
Download the CoffeeScript source from this path: http://coffeescript.org/extras/coffee-script.js
Copy and paste the below code and try to run in a browser:
<html>
<head>
<script type="text/javascript">
function printHelloJava(){
alert("Hello Javascript");
}
</script>
<script src="coffee-script.js"></script>
<script type="text/coffeescript">
#printHello = ->
alert "Hello Coffee Script"
</script>
</head>
<body>
<h1>Coffee Script on client side</h1>
<input type="button" onclick="printHelloJava();" value="Hello Java">
<br>
<input type="button" onclick="printHello()" value="Hello Coffee">
</body>
</html>
You can also use CDN coffeescript for better and faster performance.
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
or
<script src="https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js"></script>
Then use type="text/coffeescript" for compile Coffee Script.
<script type="text/coffeescript">
// add code here
</script>