Question

我正在浏览angular.io（Angular 2）的分步教程。我正在使用打字稿。尝试编译时出现以下错误：

Cannot find external module 'angular2/angular2'

使用watch命令。

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>

问为什么会出现此错误？

Answer 1

将这些文件添加到头部将为您提供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>

来源：Angular.io: 5 Minute Quickstart

Answer 2

缺少Angular2的TypeScript定义（TSD）：

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

然后再次编译（例如tsc -p src -w）

如果tsd失败，请先安装它：

npm install -g tsd@^0.6.0

Answer 3

根据相同的来源5 MIN QUICKSTART：

，我会告诉你为什么接受的解决方案很糟糕

在plunker的实例中，我们在浏览器中即时将JavaScript（AKA编译）转换为JavaScript。这对于演示来说没什么问题。这不是我们对开发或生产的偏好。

我们建议在运行应用程序之前在构建阶段对JavaScript进行转换（AKA编译），原因如下：



我们在浏览器中看到隐藏的编译器警告和错误。



预编译简化了模块加载过程，当这是一个单独的外部步骤时，它更容易诊断问题。



预编译意味着更快的用户体验，因为浏览器不会浪费时间编译。



我们更快地迭代开发，因为我们只重新编译已更改的文件。一旦应用程序超出少量文件，我们就会注意到差异。



预编译适用于构建，测试，部署的持续集成过程。

更好的解决方案：

为angular2应用创建工作流，例如使用gulp创建ts编译任务。这是一个很好的教程，我发现Creating a TypeScript Workflow with Gulp

您还可以使用自动编译ts文件的vscode编辑器read more。

如果您觉得自己懒得创建自己的工作流程，那么有几个好的启动器可以使用angular2。每个人都使用不同的工具，但所有工具都比使用运行时编译器更好。

NG6-starter

angular2-webpack-starter

angular-2 seed

Answer 4

TypeScript VS2015项目

CommonJS将不会生成正确的js代码，以便在今天（20160215）的quickstart ng2教程代码中使用：从'angular2 / core'导入{Component};

我是对的吗？

CommonJS会将其生成为ES6： var core_1 = require（'angular2 / core'）; ...

这在浏览器中不起作用，并且会说未定义require，因为快速入门使用SystemJS。但代码编辑器不会给出任何错误，VS2015中的所有内容都很好。

SystemJS会将其生成为ES6： System.register（['angular2 / core']，function（exports_1）{...

在浏览器中像魅力一样工作，但会给出“无法找到模块”错误。除了使用Empty HTML ASP.NET Web Application之外，不知道如何解决这个问题 - ＆gt;这个会让你在wwwroot中包含node_modules而不在那里实际复制它（至少对于一个新手.net程序员来说）。

的Raf。

Answer 5

为什么会出现此错误？

确保您拥有此文件：https://github.com/borisyankov/DefinitelyTyped/blob/master/angular2/angular2.d.ts项目中包含（建议使用tsconfig.json：https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md）

Answer 6

在main.ts我想你需要添加这一行：

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

Answer 7

对于那些在＆＃34; Visual Studio TypeScript项目中面临此问题的人＆＃34;然后你可能需要做以下事情来解决它。

在文本编辑器中打开.csproject和

将<TypeScriptModuleKind>更改为CommonJS
在末尾插入其他设置（TypeScriptEmitDecoratorMetadata，TypeScriptExperimentalDecorators）

这是我的.csproject参考。

<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 8

我也遇到了这个问题，然后按照说明中的说明键入了所有完全，一切正常（想象一下）。最初我曾尝试安装最新版本的angular和systemjs。但是，使用快速入门页面上提到的特定版本可以解决我的问题。

Answer 9

结帐我的样本MVC5 + Angular2（Beta1＆amp; TypeScript）VS2015解决方案：https://github.com/hobe/angular2mvc5

基本步骤：

TypeScriptModuleKind 必须设为 CommonJS
TypeScriptEmitDecoratorMetadata 和 TypeScriptExperimentalDecorators

还需要＆＃34; TypeScript 1.7.6.0 for Visual Studio 2015 Update 1＆＃34;

Answer 10

如果您正在运行meteor-angular2应用程序，我的解决方案将为您提供帮助; 只需在导入语句之前将以下行添加到您的打字稿app.ts中：

/// <reference path="typings/angular2-meteor/angular2-meteor.d.ts" />

找不到外部模块'angular2 / angular2' - Angular2 w / Typescript

10 个答案: