TS2307:在TypeScript上导入Angular2时找不到模块"angular2/core" [英] TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript

查看：60
本文介绍了TS2307:在TypeScript上导入Angular2时找不到模块"angular2/core"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一点点Angular 1背景，我正在学习Angular 2.

Hi I have a lil bit of Angular 1 background, I am learning Angular 2.

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

for starting up with Angular 1, only dependency is to add the angular sources either the angular.js or angular.min.js,

当通过脚本标签对Angular 2进行尝试时，

when trying the same with the Angular 2 via script tag,

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

我遇到类似的错误

  • Uncaught ReferenceError: System is not defined
  • Uncaught ReferenceError: define is not defined
  • Uncaught ReferenceError: System is not defined
  • Uncaught ReferenceError: define is not defined

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

so I have searched over SE and found, system.js and require.js must be added loaded before loading angular2.

以任何方式设法加载两个库，

any way I managed to load the both libraries,

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

I love to compile the TypeScript and serve the js file than sending all script to client and compiling/transpiling everything client side.

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

My IDE is WebStorm and when I try to write a simple component,

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

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

我在main.ts上的TypeScript编译器上遇到此错误，该编译为main.js，

I am getting this error on TypeScript compiler on main.ts, which compiles to main.js,

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

TypeScript编译所有内容，但不编译所有内容.

TypeScript compiles everything but not importing from 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吗?

What is causing TypeScript not to import modules from angualr2? should I configure TypeScript with Angular2?

我对TypeScript完全陌生，

I am totally new to TypeScript,

非常感谢您的帮助

更新

tsc main.ts --watch输出:

the tsc main.ts --watch output:

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分钟启动.那有特定的说明，并且很好地解释了如何开始使用它.

As you are new to TypeScript. I still suggest you to follow angular.io docs for 5 min startup. That has specific instruction and quite well explained to get started with it.

Angular2 5分钟快速入门页@ angular.io .

基本上需要具备的条件:

What you need to have basically to start:

  1. Node.js 和npm软件包管理器.
  2. Typescript (带有编译器).
  3. 文本编辑器或任何IDE， VS代码.
  4. 任何浏览器，例如 Chrome .
  1. Node.js with npm package manager.
  2. Typescript with compiler.
  3. A text editor or any IDE, VS Code.
  4. Any browser, like Chrome.

安装节点js，它还将安装npm (节点程序包管理器).现在，从这里开始，您需要按照以下步骤开始:

Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:

  1. 创建您选择的根文件夹名称，例如 ng2Playground .
  2. 现在，您必须在其中另外创建一个文件夹，该文件夹实际上包含所有.ts文件/组件文件，您可以将其命名为app ，其名称与文档一样.
  3. 现在在根级别上，您必须放置4个文件.
    3.1. tsconfig.json
    3.2 Types.json
    3.3 package.json
    3.4 index.html
  4. 设置它时(由于尚未完成，但是可以完成所有依赖项的加载，请执行npm start)，运行此命令以开始编译并监视应用程序，同时开发其他组件.
  1. Create a root folder name of your choice like ng2Playground.
  2. Now you have to create one more folder inside it which actually holds all the .ts files/ Component files, You can name it app name is just as per docs.
  3. Now at the root level you have to put 4 files.
    3.1. tsconfig.json
    3.2 typings.json
    3.3 package.json
    3.4 index.html
  4. When you set it up, as we are not finished yet but you can npm start when we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.

现在，从第3点开始，这些文件中应该有什么?

Now what should be there in these files as per point 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:types.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.

Going very well, congratulations! Yet we need the most important file 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>

好吧！

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

Okay!

We have our basic setup quite well, yet we need to install all the dependencies and devdependencies, which is absolutely required. You need to run npm install. This will install all the dependency which we have in the package.json.

软件包安装完成后，您会找到一个名为node_modules的文件夹，该文件夹具有package.json中的所有文件.

When package installation finishes you can find one folder named node_modules which is having all the files as per dependencies in the package.json.

如果npm install期间发生任何错误，则只需更新dev/依赖关系.

If any error occurs while npm install you just need to update the dev/dependencies.

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

So, i am assuming you have all the dependencies installed and just let's start:

现在，从第2点开始，我们有了一个名为app的文件夹，现在将.ts文件放入其中.

Now as per point 2, we have a folder named app now we will put our .ts files in it.

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

Create a file named app.component.ts, see the naming convention .component.ts which denotes that it is a component file. Put this code in it: 

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

Now create another file named main.ts. Why main.ts? This is because of index.html, we have defined our Systemjs module loader, see this in index.html

System.import('app/main')

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，请运行以下命令:

Yet we need to run it, for this we have to cd ng2Playgroud into it. we need to run this command from command prompt or if you have git bash installed run this: 

npm start

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

and hit enter. Now it will compile and start the lite-server installed as a dependency. If everything goes well then you'll see the template My First Angular 2 App rendered in the browser.

这篇关于TS2307:在TypeScript上导入Angular2时找不到模块"angular2/core"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆