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 external module 'angular2/angular2'
using the watch command.
main.ts
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>My first Angular 2 App</h1>'
})
class AppComponent {
}
bootstrap(AppComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.import('main');
</script>
</body>
</html>
Q Why is this error occuring?
10 answers
solution1
9 ACCPTED 2015-06-16 04:10:13
Adding these files to the head will give you the latest working version of Angular2.
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
Source: Angular.io: 5 Minute Quickstart
solution2
9 2015-09-15 08:52:33
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 (eg tsc -p src -w )
If tsd fails install it first:
npm install -g tsd@^0.6.0
solution3
3 2015-12-14 16:49:50
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.
solution4
3 2016-02-05 17:06:35
- 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.
solution5
1 2015-06-16 03:44:44
Why is this error occuring?
make sure you have this file : https://github.com/borisyankov/DefinitelyTyped/blob/master/angular2/angular2.d.ts included in your project (recommend using tsconfig.json : https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md )
solution6
1 2015-06-16 06:41:27
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.
solution7
1 2015-10-17 06:59:12
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
- change the
<TypeScriptModuleKind>as CommonJS - 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>
solution8
1 2015-12-14 14:33:54
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.
solution9
0 2016-01-26 19:14:05
checkout my sample MVC5 + Angular2 (Beta1 & TypeScript) VS2015 solution: https://github.com/hobe/angular2mvc5
Basic steps:
- TypeScriptModuleKind must be set to CommonJS
- TypeScriptEmitDecoratorMetadata and TypeScriptExperimentalDecorators must be set in your .csproj file
Also requires "TypeScript 1.7.6.0 for Visual Studio 2015 Update 1"
solution10
0 2016-03-23 09:11:17
If you are running a meteor-angular2 application my solution will help you; simply add the below line into your typescript app.ts before import statements:
/// <reference path="typings/angular2-meteor/angular2-meteor.d.ts" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.