Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

Adding these files to the head will give you the latest working version of Angular2.

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>

Source: Angular.io: 5 Minute Quickstart

The TypeScript Definition (TSD) for Angular2 is missing:

 - cd src               //go to the directory where your ts-file is
 - tsd install angular2 //load Angular2 TypeScript Definition

Then compile again (e.g. tsc -p src -w)

If tsd fails install it first:

npm install -g tsd@^0.6.0

I will tell you why the accepted solution is bad, according to the same source 5 MIN QUICKSTART :

In the live example on plunker we transpile (AKA compile) to JavaScript in the browser on the fly. That's fine for a demo. That's not our preference for development or production.

We recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:

• We see compiler warnings and errors that are hidden from us in the browser.

• Pre-compilation simpifies the module loading process and it's much easier to diagnose problem when this is a separate, external step.

• Pre-compilation means a faster user experience because the browser doesn't waste time compiling.

• We iterate development faster because we only re-compile changed files. We notice the difference as soon as the app grows beyond a handful of files.

• pre-compilation fits into a continuous integration process of build, test, deploy.

A better solution:

Create a workflow for your angular2 app, use gulp for example to create ts compile task. here is a good tutorial I found Creating a TypeScript Workflow with Gulp

you can also use vscode editor which automatically compiles your ts files, read more .

if you feel too lazy to create your own workflow, there are couple of good starters to play around with angular2. each one uses different tools but all of them are better than using a runtime compiler.

NG6-starter

angular2-webpack-starter

angular-2 seed

• TypeScript VS2015 project

CommonJS won't generate the right js code to use inside the quickstart ng2 tutorial code as it stands today (20160215): import {Component} from 'angular2/core';

Am I right?

CommonJS will generate this as ES6: var core_1 = require('angular2/core'); ...

That will not work in the browser and will say that require is not defined as the quickstart uses SystemJS. Code editor will be giving no errors, though, all good there in VS2015.

SystemJS will generate this as ES6: System.register(['angular2/core'], function(exports_1) { ...

Works like a charm in the browser but will give that "Cannot find module" error. Don't know how to solve this except using the Empty HTML ASP.NET Web Application -> This one will give you hell to include node_modules inside wwwroot without actually copying it there (at least for a newbie .net programmer).

Raf.