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

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

Why is this error occuring?

确保你有这个文件：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)

Answer 2

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

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

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

Answer 4

缺少 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 5

对于那些在 "Visual Studio TypeScript projects" 中遇到此问题的人，您可能需要执行以下操作来解决它。

在文本编辑器中打开您的 .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 6

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

Answer 7

根据同一来源，我将告诉您为什么接受的解决方案不好 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.

更好的解决方案：

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

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

如果您懒得创建自己的工作流，可以使用 angular2 进行一些不错的入门。每个都使用不同的工具，但它们都比使用运行时编译器更好。

NG6-starter

angular2-webpack-starter

angular-2 seed

Answer 8

查看我的示例 MVC5 + Angular2（Beta1 和 TypeScript）VS2015 解决方案：https://github.com/hobe/angular2mvc5

基本步骤：

TypeScriptModuleKind 必须设置为 CommonJS
TypeScriptEmitDecoratorMetadata 和 TypeScriptExperimentalDecorators 必须在您的 .csproj 文件中设置

还需要"TypeScript 1.7.6.0 for Visual Studio 2015 Update 1"

Answer 9

TypeScript VS2015 项目

CommonJS 不会生成正确的 js 代码以在今天的快速入门 ng2 教程代码中使用 (20160215)：从 'angular2/core';

导入 {Component}

我说得对吗？

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

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

SystemJS 会将其生成为 ES6： System.register(['angular2/core'], 函数(exports_1) { ...

在浏览器中效果很好，但会出现 "Cannot find module" 错误。不知道如何解决这个问题，除了使用空 HTML ASP.NET Web 应用程序 -> 这个会让你在 wwwroot 中包含 node_modules 而不实际复制它（至少对于新手 .net 程序员）。

皇家空军

Answer 10

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

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

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

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

typescript

angular