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

Question

I am going through the step by step tutorial on angular.io (Angular 2). I am using typescript. I get the following error when trying to compile:

Cannot find ex

Answer 1

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

Answer 2

In the main.ts i guess you need to add this line:

///<reference path="path/to/angular2"/>
import {Component, View, bootstrap} from 'angular2/angular2'; // then it will be fine.

Answer 3

• 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.

Answer 4

checkout my sample MVC5 + Angular2 (Beta1 & TypeScript) VS2015 solution: https://github.com/hobe/angular2mvc5

Basic steps:

1. TypeScriptModuleKind must be set to CommonJS
2. TypeScriptEmitDecoratorMetadata and TypeScriptExperimentalDecorators must be set in your .csproj file

Also requires "TypeScript 1.7.6.0 for Visual Studio 2015 Update 1"

Answer 5

For those who are facing this issue in "Visual Studio TypeScript projects" then you might need to do the following thing to resolve it.

Open your .csproject in text editor and

1. change the <TypeScriptModuleKind> as CommonJS
2. Insert additional settings(TypeScriptEmitDecoratorMetadata, TypeScriptExperimentalDecorators) at the end

Here is my .csproject reference.

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
            <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
            <TypeScriptSourceMap>true</TypeScriptSourceMap>
            <TypeScriptTarget>ES5</TypeScriptTarget>
            <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
            <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
            <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
            <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
            <TypeScriptOutFile />
            <TypeScriptOutDir />
            <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
            <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
            <TypeScriptMapRoot />
            <TypeScriptSourceRoot /
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
          </PropertyGroup>

Answer 6

I hit this problem too and then typed everything exactly as specified in the instructions and everything worked (imagine that). Originally I had tried to just install the latest version of angular and systemjs. However using the specific versions noted on the quickstart page resolved the issue for me.