Issue updated. Please check the edit
I want to use the debugger included in Webstorm to run my project. I'm
using Angular2 and TypeScript. I need to place breakpoints into my typescript files.
Basically, my index.html just imports some .js files and starts my
app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="build/core/system.config.js"></script>
<script src="build/core/moduleLoader.js"></script>
<script src="build/core/bootstrap.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
bootstrap();
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
bootstrap is defined as follow :
const bootstrap:()=>Promise<void>= async function() {
await ModuleLoader.loadAll();
System.import('core/app').then(null, console.error.bind(console));
};
window.bootstrap = bootstrap;
When I run my index.html in debug mode, an error is thrown,
bootstrap() is not defined.
When I run the app inside a browser, it works well. Have I missed some configuration ?
I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.
EDIT
Maybe a usefull information :
I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.
You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.
Another important point: make sure you generate source maps when compiling your TypeScript code.
Related
I have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.
I'm making Angular2 app, and the main HTML is this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>App</title>
<script src="./lib/traceur-runtime.js"></script>
<script src="./lib/system.js"></script>
<script src="./lib/angular2.dev.js"></script>
</head>
<body>
<app></app>
<script src="./js/bootstrap.js"></script>
</body>
</html>
My goal is to make all files load locally. So - when I put those three files in the lib folder - I saw in the network inspector that it can't load "es6-modules-loader#0.16.6.js" from there, so I downloaded that file from Internet and put it in the "lib" folder. Then all worked fine :)
BUT:
Today the network connections stopped for a while, and I couldn't run the project, cause it actually loaded two more files from the net:
https://github.jspm.io/jmcriffey/bower-traceur#0.0.87.js
https://github.jspm.io/jmcriffey/bower-traceur#0.0.87/traceur.js
I see them defined at the end of system.js.
So my question is: How can I make everything loads from the local filesystem?
This is my set up, I hope it works for you
I installed all this packages through npm.
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<!-- alpha35 -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
With simply this, systemjs will not be able to find any of the angular2 files, so you have to add paths in System.config to tell to systemjs where angular2's files are.
System.config({
traceurOptions: {
annotations: true,
types: true,
memberVariables: true
},
paths: {
'angular2/*' : 'node_modules/angular2/*'
},
defaultJSExtensions: true // or you specify the .js
});
This is my set up, not necessarily the best one, but it works for me.
I hope it helps you.
The Dart app runs fine in Dartium, but I would like to convert it to JS.
C:\dart-sdk\bin\dart2js --out=test.js main.dart generates JS from:
import 'dart:html';
void main() {
querySelector('#myid').text = 'Wake up, sleepy head!';
}
Then I add it to the <head>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p id="myid">hello</p>
</body>
</html>
But when I run it in Firefox, it doesn't work. It shows only "Hello" on the page. What am I doing wrong?
dart2js is usually not the straight-forward way to generated JS from Dart.
Normally you just run pub build in your project directory.
Ensure you have your pubspec.yaml configured properly csp: true (for Chrome apps Using Polymer in a Dart Chrome App, Chrome App CSP violation after Dart/Polymer transform/compile to JavaScript)
I have a simple angular app with a directory structure that looks like the following:
-lpbm
-shared
- js
- css
-public
app.js
index.html
I run http-server within the lpbm folder which creates http://localhost:8080
I then try to access http://localhost:8080/public/index.html but i get a blank page and the following error in my terminal window: "GET /public/index.html" Error (404): "not found"
This was working before, and something random must be stopping it from working correctly, as the directory and url structure are correct. I've tried removing all my custom files other than my index.html and app.js which are below
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheapest Fares</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../shared/css/bootstrap-cerulean.css">
<link rel="stylesheet" href="../shared/css/app.css">
<link rel="stylesheet" href="../shared/css/lpbm.css">
<script src="../shared/js/angular.js"></script>
<script src="../shared/js/angular-messages.js"></script>
<script src="../shared/js/angular-message-format.js"></script>
<script src="../shared/js/angular-route.js"></script>
<script src="../shared/js/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body class="container" ng-app="app" ng-strict-di ng-controller="AppController as app">
<h1>Our cheapest fares from London</h1>
<div class="row">
<ng-view autoscroll></ng-view>
</div>
</body>
</html>
app.js:
angular.module('app', ['ngMessages', 'ngMessageFormat', 'ngRoute', 'ngAnimate'])
.controller('AppController', function() {
console.log('working?');
})
Is there any obvious reason this is not working? if i open up a test angular app and do the same http-server process it works, suggesting it is something wrong with my app.js or index.html but i can't spot what, i've literally removed everything and it still refuses to load.
I've moved your code to Plunker and removed additional dependecies and all seems to be working fine.
I would sugest to do the same on your side as well. If this is not an issue, try to look on the server side of the app.
Also the error
"GET /public/index.html" Error (404): "not found"
you've mentioned might be sugesting this.
Plunker link: http://plnkr.co/edit/MLkrJdzyd7mPEHyYe1v6?p=preview
The reason your files are accessible at http://localhost:8080/ and not http://localhost:8080/public/ is because you are using a virtual mount path. In a framework like express, for example, that is done like this:
app.use('/', express.static('public'));
This determines what parts of your server are accessible client-side. The first argument ('/') sets the location that clients navigate to in order to access the files at the location in the second argument ('public'). The reason your /shared folder was not accessible until you place it in the /public directory is because it was outside the scope of what was being exposed to the client.
If you aren't using express, the code may look slightly different, but this is essentially what is happening. Somehow this line of code was uncommented or added to your server.
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.