首页 文章

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

提问于
浏览 次
13

我正在浏览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>

Q 为什么会出现此错误？

typescript angular

10 回答

  • 3

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

    回复于
  • 1

    缺少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
    回复于
  • 0

    我会告诉你为什么接受的解决方案是坏的，根据相同的来源5 MIN QUICKSTART：

    在关于plunker的实例中，我们在浏览器中即时将JavaScript（AKA编译）转换为JavaScript . 这对于演示来说很好 . 这不是我们对开发或 生产环境 的偏好 . 我们建议在运行应用程序之前在构建阶段对JavaScript进行转换（AKA编译）有几个原因，包括：我们在浏览器中看到隐藏的编译器警告和错误 . 预编译简化了模块加载过程，当这是一个单独的外部步骤时，它更容易诊断问题 . 预编译意味着更快的用户体验，因为浏览器不会浪费时间编译 . 我们更快地迭代开发，因为我们只重新编译已更改的文件 . 一旦应用程序超出少量文件，我们就会注意到差异 . 预编译适用于构建，测试，部署的持续集成过程 .

    A better solution:

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

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

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

    NG6-starter

    angular2-webpack-starter

    angular-2 seed

    回复于
  • 1
    • TypeScript VS2015项目

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

    我对吗？

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

    这在浏览器中不起作用，并且会说要求未定义为快速入门使用SystemJS . 但是代码编辑器没有给出任何错误，VS2015中的所有功能都很好 .

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

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

    拉夫 .

    回复于
  • 9

    为什么会出现这个错误？

    确保你有这个文件：https://github.com/borisyankov/DefinitelyTyped/blob/master/angular2/angular2.d.ts包含在你的项目中（推荐使用tsconfig.json：https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md）

    回复于
  • 1

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

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

    对于那些在“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>
    回复于
  • 1

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

    回复于
  • 9

    checkout我的样本MVC5 Angular2（Beta1和TypeScript）VS2015解决方案：https://github.com/hobe/angular2mvc5

    基本步骤：

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

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

    回复于
  • 3

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

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

相关问题