找不到外部模块 'angular2/angular2' - 使用Typescript的Angular2

Question

找不到外部模块 'angular2/angular2' - 使用Typescript的Angular2

14

我正在按照angular.io（Angular 2）的逐步教程学习，使用typescript。在使用watch命令编译时，遇到以下错误：

Cannot find external module 'angular2/angular2'

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为什么会出现这个错误？

- karns

1

我一直在遵循angular.io上的“英雄之旅”教程，但是我从tsc获得了这个错误消息，但它并没有阻止我的代码编译和运行angular2应用程序。 - Walter Stabosz

1

@karns FYI，从angular2@2.0.0-beta.0开始，angular2/angular2导入已更改为angular2/core，并且引导函数已移动到angular2/platform/browser。 - Evan Plaice

10个回答

9

将这些文件添加到head标签中将为您提供最新的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分钟快速入门

- shmck

这确实是解决方案。逐步教程有点含糊不清，不太清楚需要什么... - karns

3

根据同一来源 5分钟快速入门，我将告诉您为什么接受的解决方案不好：

在plunker上的实时示例中，我们会在浏览器中即时转换（又称编译）为JavaScript。这对于演示来说是可以的。但这并不是我们开发或生产的首选。

我们建议在运行应用程序之前，在构建阶段将其转换（又称编译）为JavaScript，原因如下：

- 我们可以看到编译器在浏览器中隐藏的警告和错误。 - 预编译简化了模块加载过程，而且当这是一个单独的外部步骤时，很容易诊断问题。 - 预编译意味着更快的用户体验，因为浏览器不会浪费时间进行编译。 - 我们可以更快地迭代开发，因为我们只重新编译已更改的文件。当应用程序超过少量文件时，我们会立即注意到差异。 - 预编译适合构建、测试、部署的持续集成过程。

更好的解决方案：

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

您还可以使用自动编译ts文件的vscode编辑器，了解更多。

如果您觉得太懒而不想创建自己的工作流程，那么有几个很好的入门示例可供使用angular2。每个示例都使用不同的工具，但所有示例都比使用运行时编译器要好。 NG6-starter angular2-webpack-starter angular-2 seed

- Murhaf Sousli

我在当前版本的Quickstart中找不到这些评论。显然，它已被以下内容替换：我们建议在构建阶段转换（又名编译）为JavaScript，然后再运行应用程序，原因有几个，包括：我们可以看到编译器警告和错误，这些在浏览器中是隐藏的。预编译简化了模块加载过程... ---等等。没有关于从Web下载是一个坏主意的部分，因为缓存被破坏了。我想知道那部分是否真的正确？这似乎是一个单独的问题。 - ckapilla

根据@ckapilla的评论，我建议不要采用这种方法。如果gulp设置为捆绑输出，则每次刷新页面时都会进行转译和捆绑代码。内联转译效果更好。热加载（即angular2-seed使用的内容）更好。 - Evan Plaice

3

TypeScript VS2015 项目

CommonJS 不能生成正确的 js 代码，以便在当前 (20160215) 的快速入门 ng2 教程代码中使用：

import {Component} from 'angular2/core';

我说得对吗？

这会将 CommonJS 生成为 ES6:

var core_1 = require('angular2/core'); ...

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

SystemJS 将生成此内容：

System.register(['angular2/core'], function(exports_1) { ...

这在浏览器中工作得很好，但会产生“无法找到模块”的错误。不知道如何解决此问题，除了使用 Empty HTML ASP.NET Web Application。这将使您很难将 node_modules 包含在 wwwroot 中而不实际复制它（至少对于新手 .net 程序员而言）。

Raf.

- Pirolla

1

我也遇到了这个问题，然后按照指示精确地输入了所有内容，一切都正常工作了（想象一下）。最初，我尝试只安装最新版本的Angular和SystemJS。然而，使用快速入门页面上注明的特定版本解决了我的问题。

- scottrudy

1

为什么会出现这个错误？

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

- basarat

1

在 main.ts 中，我猜你需要添加这一行代码：

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

- Jai

如果使用tsdconfig.json作为TypeScript编译器的配置文件，则不需要这第一行。 - magiccrafter

1

如果你在“Visual Studio TypeScript项目”中遇到了这个问题，那么你可能需要执行以下操作来解决它。

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

- Senthil

0

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

基本步骤：

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

还需要“Visual Studio 2015 Update 1的TypeScript 1.7.6.0”

- Bernhard Hochgatterer

0

如果您正在运行一個meteor-angular2應用程序，我的解决方案将对您有所帮助；只需在导入语句之前，在您的typescript app.ts中添加以下行：

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

- Vijay Vittal

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dunken · Accepted Answer

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