Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Angular2 and Typescript in Jsfiddle

Tags:

Dummy question ...
I try to code an angular2 (2.0.0-beta.6) app in Typescript in jsfiddle.
I know that there is other solution online but ...
In fact, my example is very small and the problem is on import module :

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';

I got the following error :

Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined

I try to add some dependencies (require, system ...) but it doesn't work.
And there is no more Self-Executing bundle for recent version (beta-6) of Angular2 (angular2.sfx.dev.js).

Some tests :
https://jsfiddle.net/asicfr/q8bwosfn/1/
https://jsfiddle.net/asicfr/q8bwosfn/3/
https://jsfiddle.net/asicfr/q8bwosfn/4/
https://jsfiddle.net/asicfr/q8bwosfn/5/
https://jsfiddle.net/asicfr/q8bwosfn/6/

like image 709
asicfr Avatar asked Feb 12 '16 16:02

asicfr


People also ask

How do I run JSFiddle code?

Entering and running code JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result. Once you enter code, just hit Run in the top actions bar, and the fourth panel with results will appear.

Is JSFiddle an IDE?

JSFiddle is an online IDE which is designed to allow users to edit and run HTML, JavaScript, and CSS code on a single page.

What is set as base in JSFiddle?

jsFiddle allows you to save your progress in an incremental fashion, by saving different "versions" of your fiddle every time you press "Update." Upon pressing "Update," you will notice that a number is appended to your URL, and the button labelled "Set as base" will show up.


2 Answers

In Plunker you can just use the menu

New > Angularjs > 2.0.x (TS)

to get a minimal working Angular2 application

Router

If you want to use the router add in config.js

'@angular/router': {
  main: 'router.umd.js',
  defaultExtension: 'js'
},

<base href="."> as first child in the <head> of index.html might be necessary as well.

To switch to HashLocationStrategy change main.ts from

import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

to

import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
import {provide} from '@angular/core'
import {ROUTER_PROVIDERS} from '@angular/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}])
  .catch(err => console.error(err));
like image 121
Günter Zöchbauer Avatar answered Oct 21 '22 08:10

Günter Zöchbauer


If you are not tied to JS Fiddle, consider Plunker instead. The Angular devs keep a bare workspace up to date with new Angular releases at this link.

It is more current than even Plunker's own Angular 2 setup (which you can access from the Plunker menu: New > AngularJS > 2.0.x (TS)

The downside: that setup is in TypeScript, so if you wish to develop with vanilla Javascript (ES5 or ES6), your best bet is to use the Plunker menu option instead.

like image 26
BeetleJuice Avatar answered Oct 21 '22 09:10

BeetleJuice