javascript - TS2307 : Cannot find module 'angular2/core' while importing Angular2 on TypeScript

大家好，我只有一点 Angular 1 的背景，我正在学习 Angular 2。

从 Angular 1 开始，唯一的依赖是添加 Angular 源 angular.js 或 angular.min.js，

当通过脚本标签尝试使用 Angular 2 时，

<script src="angular2.js"></script>

我收到类似这样的错误

未捕获的 ReferenceError:系统未定义
未捕获的 ReferenceError:define 未定义

所以我搜索了 SE，发现 system.js 和 require.js 必须在加载 angular2 之前加载。

我设法加载这两个库的任何方式，

我喜欢编译 TypeScript 并提供 js 文件，而不是将所有脚本发送到客户端并在客户端编译/转译所有内容。

我的 IDE 是 WebStorm，当我尝试编写一个简单的组件时，

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

    constructor() {
        this.name = "HelloWorld";
    }
}

我在 main.ts 上的 TypeScript 编译器上遇到这个错误，它编译成 main.js，

Error:(1, 25) TS2307: Cannot find module 'angular2/core'.

TypeScript 会编译所有内容，但不会从 Angular 导入。

我的简单index.html如下所示，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>

</head>
<body>

    <script src="system.js"></script>
    <script src="require.js"></script>
    <script src="angular2.js"></script>
    <script src="main.js"></script>
</body>
</html>

是什么导致 TypeScript 无法从 angualr2 导入模块？我应该使用 Angular2 配置 TypeScript 吗？

我是 TypeScript 的新手，

非常感谢您的帮助

更新

tsc main.ts --watch 输出:

main.ts(1,25): error TS2307: Cannot find module 'angular2/core'.
main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
11:43:39 PM - Compilation complete. Watching for file changes.

最佳答案

因为您是 TypeScript 的新手。我仍然建议您按照 angular.io 文档进行 5 分钟启动。那有具体的说明，并且很好地解释了如何开始使用它。

Angular2 5 min quickstart page @ angular.io .

你基本上需要具备的东西:

Node.js使用 npm 包管理器。
Typescript与编译器。
文本编辑器或任何 IDE，VS Code。
任何浏览器，例如 Chrome。

安装 node js，它还会安装 npm (节点包管理器)。现在，您需要按照以下步骤开始:

创建一个您选择的根文件夹名称，例如 ng2Playground。
现在您必须在其中再创建一个文件夹，该文件夹实际上包含所有 .ts 文件/组件文件，您可以将其命名为 app name is just根据文档。
现在在根级别，您必须放置 4 个文件。
3.1. tsconfig.json
3.2 打字.json
3.3 package.json
3.4 index.html
当你设置它时，因为我们还没有完成但是你可以 npm start 当我们完成加载所有依赖项时，运行这个命令开始编译并观察应用程序，同时你开发其他组件。

现在根据第 3 点，这些文件中应该包含什么。

3.1 : tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

3.2 : typings.json

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

3.3 : package.json

{
  "name": "ng2-test",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

进展顺利，恭喜!然而，我们需要最重要的文件 index.html。

3.4 : index.html

<!doctype html>
<html>
<head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>
</body>

</html>

好的!

我们的基本设置非常好，但是我们需要安装所有的依赖项和开发依赖项，这是绝对必需的。您需要运行 npm install。这将安装我们在 package.json 中的所有依赖项。

当包安装完成后，您会发现一个名为 node_modules 的文件夹，其中包含 package.json 中每个依赖项的所有文件。

如果在 npm install 时发生任何错误，您只需要更新开发/依赖项。

所以，我假设你已经安装了所有依赖项，让我们开始吧:

现在按照第 2 点，我们有一个名为 app 的文件夹，现在我们将把我们的 .ts 文件放入其中。

创建一个名为app.component.ts的文件，见命名约定.component.ts表示它是一个组件文件。将此代码放入其中:

import {Component} from 'angular2/core'; // <-- importing Component from core

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.

现在创建另一个名为 main.ts 的文件。为什么是 main.ts？这是因为 index.html，我们已经定义了我们的 Systemjs 模块加载器，请参见 index.html

System.import('app/main')

main.ts 的内容:

import {bootstrap}    from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created

bootstrap(AppComponent); // finally bootstrap it.

现在我们完成了。

耶!!!

但我们需要运行它，为此我们必须将 cd ng2Playgroud 放入其中。我们需要从命令提示符运行这个命令，或者如果你安装了 git bash 运行这个:

npm start

然后按回车键。现在它将编译并启 Action 为依赖项安装的 lite-server。如果一切顺利，您将看到在浏览器中呈现的模板 My First Angular 2 App。

关于javascript - TS2307 : Cannot find module 'angular2/core' while importing Angular2 on TypeScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35692503/