How to use Angular2 and Typescript in Jsfiddle

import module typescript angular jsfiddle
asicfr picture asicfr · Feb 12, 2016 · Viewed 9.3k times · Source

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/

Answer

Günter Zöchbauer picture Günter Zöchbauer · May 25, 2016

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));

Related questions

Typescript: How to export a variable

I want to open 'file1.ts' and write: export var arr = [1,2,3]; and open another file, let's say 'file2.ts' and access directly to 'arr' in file1.ts: I do it by: import {arr} from './file1'; However, when I …

Read More
How can I get TypeScript to load the PDF.js NPM module and @types bindings in a way that generates working Node.JS code?

Context I'm trying to import PDF.JS into a TypeScript project. I'm using the DefinitelyTyped bindings for pdfjs-dist, installed via npm install @types/pdfjs-dist and npm install pdfjs-dist. Problem I can't seem to get TypeScript to compile my project. I'm …

Read More
`from ... import` vs `import .`

I'm wondering if there's any difference between the code fragment from urllib import request and the fragment import urllib.request or if they are interchangeable. If they are interchangeable, which is the "standard"/"preferred" syntax (if there is one)?

Read More