在TypeScript中导入Angular2时出现TS2307错误:找不到模块'angular2/core'。

32

嗨,我有一点 Angular 1 的背景,现在正在学习 Angular 2。

要开始使用 Angular 1,唯一的依赖是添加 angular 源代码,可以是 angular.jsangular.min.js

但如果想通过脚本标签试用 Angular 2,则:

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

我遇到了以下错误:

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

于是我在搜索引擎上查找后发现,在加载angular2之前必须添加并加载system.jsrequire.js

无论如何,我成功加载了这两个库。

我喜欢编译TypeScript并提供js文件而不是将所有脚本发送给客户端并在客户端进行编译/转换。

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

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

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

我在 TypeScript 编译器中的 main.ts 文件上遇到了这个错误,它会编译成 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无法从Angular2导入模块? 我是否需要使用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.

前往5分钟快速入门。 - Jai
2
@Jai 5分钟快速入门使用基于浏览器的编译。很想先编译然后在浏览器上加载。 - user5170375
使用tsc进行编译,有什么问题吗? [tsc filename.ts --watch] - Pardeep Jain
@PardeepJain 更新了问题并附上了控制台输出。 - user5170375
装饰器支持不是问题,但是导入是个问题。我已经使用-m amd -t ES5 --experimentalDecorators配置了tsc。 - user5170375
显示剩余2条评论
8个回答

39

由于您是新手,我建议您仍然遵循 angular.io 文档的 5 分钟启动。那里有具体的说明,并且非常详细地解释了如何入门。

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

要开始,您需要基本拥有以下内容:

  1. Node.js(带npm包管理器)。
  2. Typescript编译器。
  3. 一个文本编辑器或任何 IDE,例如VS Code
  4. 任何浏览器,例如Chrome

安装 Node.js 并它也会安装 npm (node package manager)。现在,您需要按照以下步骤开始:

  1. 创建一个根文件夹,随意命名,例如ng2Playground
  2. 现在,您必须在其中创建另一个文件夹,该文件夹实际上保存所有的 .ts 文件 / 组件文件,您可以将其命名为 app 名称仅按照文档
  3. 现在,在根级别上,您必须放置 4 个文件。
    3.1. tsconfig.json
    3.2 typings.json
    3.3 package.json
    3.4 index.html
  4. 当您设置好后,因为我们还没有完成,但是可以在加载所有依赖项后运行 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>

好的!

我们基本设置很好,但需要安装所有依赖项和devdependencies。您需要运行npm install。这将安装在package.json中具有的所有依赖项。

当包安装完成后,您可以找到一个名为node_modules的文件夹,其中包含package.json中所需的所有文件。

如果在npm install过程中出现任何错误,您只需更新dev/dependencies即可。

因此,我假设您已安装了所有依赖项,让我们开始吧:

现在根据第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  

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


13

通过在我的tsconfig.json文件中添加 "moduleResolution" : "node",我成功地解决了这个问题。

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

我不明白为什么会有人踩这篇文章。至少在我的情况下,这正是我需要的,可以让webpack和当前版本的Angular2一起工作。 - Michael Oryl
这行代码对我很有效:"moduleResolution": "node", 谢谢。我相当确定上个月或者之前当我在解决问题时,将其更改为“classic”就可以了,但现在“node”对我来说是最好的选择。 - Matt Rowles

3
首先回答问题,“为什么TypeScript不能从Angular2导入模块?我应该配置TypeScript和Angular2吗?”你已经导入了模块加载器但没有配置它。你不需要配置TypeScript和Angular2,而是需要配置模块加载器。
由于接受的答案已过时(针对Angular2的beta版本),很多事情都发生了变化,包括在当前的Angular 2 Release Candidate(RC2)中的模块加载器,这就是对我有效的方法。
目录结构。
.                             # project directory
├── app                       # main app directory
│   ├── app.component.ts
│   └── main.ts
├── bs-config.js             
├── index.html
├── node_modules              # npm package directory
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json

文件如下:
app: 应用程序目录,包含项目文件。
app.component.ts: 应用程序组件文件。
main.ts: 入口点和引导程序。
bs-config.js: Lite Server(基于 browsersync 的开发服务器)配置文件。
index.html: 应用程序的索引页面。
node_modules: npm 包的安装位置。
package.json: npm 配置文件。
systemjs.config.js: SystemJS 配置文件。
tsconfig.json: TypeScript 编译器配置文件。
typings.json: 类型定义文件。

每个文件的内容。

  1. index.html file

    <html>
      <head>
        <title>Hello Angular 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
    
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
      </head>
    
      <!-- 3. Display the application -->
      <body>
        <my-app>Loading...</my-app>
      </body>
    </html>
    
  2. package.json

    {
        "name": "hello-angular-2",
        "version": "1.0.0",
        "scripts": {
          "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
          "lite": "lite-server",
          "postinstall": "typings install",
          "tsc": "tsc",
          "tsc:w": "tsc -w",
          "typings": "typings"
        },
        "license": "ISC",
        "dependencies": {
          "@angular/common":  "2.0.0-rc.2",
          "@angular/compiler":  "2.0.0-rc.2",
          "@angular/core":  "2.0.0-rc.2",
          "@angular/http":  "2.0.0-rc.2",
          "@angular/platform-browser":  "2.0.0-rc.2",
          "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
          "@angular/router":  "2.0.0-rc.2",
          "@angular/router-deprecated":  "2.0.0-rc.2",
          "@angular/upgrade":  "2.0.0-rc.2",
          "systemjs": "0.19.27",
          "core-js": "^2.4.0",
          "reflect-metadata": "^0.1.3",
          "rxjs": "5.0.0-beta.6",
          "zone.js": "^0.6.12",
          "angular2-in-memory-web-api": "0.0.12",
          "bootstrap": "^3.3.6"
        },
        "devDependencies": {
          "concurrently": "^2.0.0",
          "lite-server": "^2.2.0",
          "typescript": "^1.8.10",
          "typings":"^1.0.4"
        }
      }
    
  3. systemjs.config.js

    /**
     * System configuration for Angular 2 samples
     * Adjust as necessary for your application needs.
     */
    (function(global) {
      // map tells the System loader where to look for things
      var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
      };
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };
      var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
      ];
      // Individual files (~300 requests):
      function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
      }
      // Bundled (~40 requests):
      function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
      }
      // Most environments should use UMD; some (Karma) need the individual index files
      var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
      // Add package entries for angular packages
      ngPackageNames.forEach(setPackageConfig);
      var config = {
        map: map,
        packages: packages
      };
      System.config(config);
    })(this);
    
  4. tsconfig.json

    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      }
    }
    
  5. typings.json

    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160317120654",
        "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
        "node": "registry:dt/node#4.0.0+20160509154515"
      }
    }
    
  6. main.ts

    import { bootstrap }    from '@angular/platform-browser-dynamic';
    import { AppComponent } from './app.component';
    bootstrap(AppComponent);
    
  7. app.component.ts

    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<h1>Hello World from Angular 2</h1>'
    })
    export class AppComponent { }
    


安装依赖项

在保存了以上所有文件之后,打开终端窗口,进入项目所在位置并运行npm install,这将安装所有的依赖项到node_modules目录中,根据您的连接速度可能需要花费一些时间。

运行开发服务器

在安装所有依赖项之后,在项目位置的终端上运行npm start。这将同时运行typescript编译器lite-server,帮助编译/转译代码以及在更改源代码时重新加载网页。

现在可能会打开一个新的浏览器窗口。如果没有,请将您喜欢的浏览器指向http://127.0.0.1:3000/http://localhost:3000/,如果一切顺利,您将看到一个页面,上面写着:

Hello World from Angular 2

就是这样!


如果您不想让lite-server每次运行npm start时自动打开浏览器,请将以下内容添加到您的bs-config.js中。

module.exports = {
    "open": false
};

来自angular.io的代码示例


非常有帮助,谢谢!我正在使用官方网站学习Angular2。我下载了示例代码(例如从Lifecycle Hooks的Developer Guide的Plunkr实时代码)。这些文件可以正常工作。但是,当我在WebStorm中打开这些文件时,代码导航(例如跳转到声明)无法正常工作(可能是因为angular核心文件不在本地?)。为了使所有内容都在本地,我使用了您的策略,除了main.ts和app.component.ts,因为我已经拥有它们。但是,您需要将package.json项目名称更改为“hello-angular-2”,以使其符合较新版本的npm的规定。 - Andrew Willems
这个对我有用。我一直在使用gulp,但现在我使用了npm start - user9869932

2
请使用'@angular/core'代替'angular2/core'

1
在 index.html 文件中执行以下操作:
<html>

<head>
    <base href="/"></base>
</head>

<body>
    <app>Loading....</app>
</body>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true
            });

</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>    
<script>
    System.import('App');
</script>

</html>

尝试使用这个作为你的第一个组件:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'app',
    template: "Hello"
})
export class App{  
    constructor(){ }    
}

bootstrap(App); 

你的 Index.html 文件缺少了很多内容,比如使用 system.js 导入主要组件,例如 System.import('App');

tsconfig.json:

{
  "version": "1.5.3",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  }
}

对于初创公司来说,没有必要使用 rxjs。基本上我们只在特殊方法中使用rxjs,例如在 Http 的可观察流中。 - Pardeep Jain
这只是angular.io的快速启动plunk,通过浏览器编译ts。因此并没有解决我的问题。无论如何,谢谢。 - user5170375
你可以通过运行tsc filename.ts --watch来将你的TS文件编译成JS。 - Pardeep Jain
问题是错误:(1, 25)TS2307:找不到模块'angular2/core'。如果你读/理解了问题。 - user5170375
让我们在聊天中继续这个讨论 - Pardeep Jain
显示剩余3条评论

0
你应该导入这些文件:
<!-- ZonesJS and Reflect-metadata -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- RxJS (observables) -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- Main Angular2 bundle -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

使用以下配置来配置SystemJS:

<script>
  System.config({
    defaultJSExtensions: true,
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      }
    }
  });
  System.import('app/boot')
    .then(null, console.error.bind(console));
</script>

我假设你的TypeScript文件位于一个名为app的子文件夹中,而app/boot.ts是包含对bootstrap函数调用的文件。


仍然出现 Error:(1, 25) TS2307: Cannot find module 'angular2/core'. - user5170375
这对应于tsc编译时的错误。你能把你的tsconfig.json文件放到问题中吗?你有在排除某些内容吗(例如排除node_modules)?事实上,编译依赖于*.d.ts文件(在你的情况下是node_modules/angular2/core.d.ts)... - Thierry Templier

0

请确保文件夹“node_modules”(单击显示隐藏文件)位于正确位置(在项目的根目录中,与wwwroot同级)。还要检查@angular是否显示在项目的依赖项文件夹中:

[proj. name]/Dependencies/npm/@angular...

当我将快速入门指南集成到新的ASP.NET Core项目中时,我移动了文件,导致node_modules文件夹错位。

希望这可以帮助到您。


-1

你可能忘记运行:

npm install

在你的 Angular 项目下/


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接