Search code examples
javascriptangularjsangular2-templatejsfiddle

How to use plunker or jsfiddle to run angular2 code

I was trying to practice some programs in plnkr or jsfiddle for Angular 2. But I always see that they are not working, if I open the developer tools I see 404 errors or some other exceptions. What is the correct way to run Angular2 applications in plnkr or jsfiddle.

Here are the links I was referring to:

A very basic program in Angular2 in jsfiddle

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }

Another jsfiddle example.

These 2 are plnkr examples: Plunkr1, plunkr2

Update:

When I am using jsfiddle I have selected Typescript + Angular 2 like this

enter image description here

In developer console I still see error messages:

enter image description here

These are the error details:

angular2.js:3282 Uncaught ReferenceError: System is not defined
    at angular2.js:3282
(anonymous) @ angular2.js:3282
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
system.js:1 Failed to load resource: the server responded with a status of 404 ()
Rx.js:1 Failed to load resource: the server responded with a status of 404 ()
angular2.dev.js:1 Failed to load resource: the server responded with a status of 404 ()
require.js:8 Uncaught Error: Module name "angular2/platform/browser" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at G (require.js:8)
    at Object.e [as require] (require.js:27)
    at requirejs (require.js:33)
    at eval (eval at exec (typescript.js:41), <anonymous>:9:17)
    at exec (typescript.js:41)
    at HTMLDocument.runScripts (typescript.js:41)
Solution

  • Jsfiddle.net: In the Javascript window of jsfiddle, you can choose to use Javascript + Angular from the dropdown list that appears when you click the JS frame title. This is a relatively new feature in jsfiddle, which was updated a few months ago.

    Also check out Stackblitz.com, which is another online editor, handy for use with React/Angular and other JS frameworks.

    If you get 404 exceptions for a file not found etc, it may because of an incorrect/incomplete path or missing file.

    You have paths to non-existent resources in your resource panel. The redundant links are causing the 404 errors. Either use the jsfiddle Javascript/Angular combo OR use valid imported resources. Remove the redundant resources (all except require.js) and you will see the difference. Also correct any syntax errors.

    Hope this helps

    (I don't use plunkr much, can't offer advice there)..