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.
Related
I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using
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.
The reason to have src and dist folders is pretty clear: we change source code commit it to repository and use compiled dist files for production.
But what could you recommend for development? We still want to keep src clean from compiled file and make it very fast to review the changes.
Before we just transpiled SAAS into CSS and put it into source and keep JS files as they are(without compiling in one file or coping them to dist). And now we decided to rethink the concept.
we are doing web development, but I think question is more broad.
If I well understood, you are looking for a development architecture/workflow to directly serve you sources to the browser (and use DevTools edition features btw). In fact, there are 2 things to do to achieve this.
1) For compiled/transpiled languages (SAAS, LESS, TypeScript, ...) and unsupported languages (ES6, ES7), you will need to compile/transpile them on the client side. Tools like LESS.js, typescript.js, BabelJS are great to do that. I don't know any SAAS compiler implementation in Javascript.
2) Then, you need 2 different html indexes. For example index.hml for production and dev.html for development.
index.html with bundled (dist) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>
<body>
...
</body>
</html>
dev.html with all sources (src) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title (Dev)</title>
<link rel="stylesheet/less" type="text/css" href="src/file1.less" />
<script type="text/javascript" src="src/file1.js"></script>
<script type="text/javascript" src="src/file2.js"></script>
<script type="text/javascript" src="src/file3.js"></script>
<script type="text/javascript" src="lib/less.js"></script>
</head>
<body>
...
</body>
</html>
This way, developers access the web app using, let's say http://localhost/dev.html and can enjoy all the goodness to have sources right in the browser. Without taking care of the compilation.
To apply such an architecture you may need to adapt client and/or server code and also build tools to work in both mode (prod and dev).
Hope I helped.
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
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.