可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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?
回答1:
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
回答2:
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
回答3:
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
回答4:
- 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.
回答5:
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)
回答6:
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.
回答7:
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>
回答8:
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.
回答9:
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"
回答10:
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" />
