TS2307：在TypeScript上导入Angular2时找不到模块'angular2 / core'

时间：2016-02-29 05:23:14

标签： javascript angular typescript

嗨我有一点角色1背景，我正在学习Angular 2。

对于使用Angular 1启动，只有依赖是添加角度源angular.js或angular.min.js，

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

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

我收到错误，

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

所以我搜索了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 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.

8 个答案:

答案 0 :(得分：38)

您不熟悉 TypeScript 。我仍然建议你按照 angular.io docs进行5分钟的启动。这有特定的指导，并且很好地解释了开始使用它。

Angular2 5 min quickstart page @ angular.io。

你需要基本上开始：

  1. Node.js与npm包经理。
  2. Typescript带编译器。
  3. 文本编辑器或任何IDE， VS Code 。
  4. 任何浏览器，例如 Chrome 。

    5. 安装节点js，它还会安装npm （节点包管理器）。现在，您需要按照以下步骤开始：

    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，运行这个命令来开始编译并观察应用程序，同时开发其他组件。 / LI>

      现在按照第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期间发生任何错误，您只需要更新开发/依赖项。

      所以，我假设您已经安装了所有依赖项，并且让我们开始：

      现在按照第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（＆＃39; app / main＆＃39;）

      这是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

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

答案 1 :(得分：11)

我能够通过添加＆＃34; moduleResolution＆＃34;来解决这个问题。 ：＆＃34;节点＆＃34;到我的tsconfig.json文件

java.util.GregorianCalendar[time=?,areFieldsSet=false,areAllFieldsSet=false,lenient=true,zone=sun.util.calendar.ZoneInfo[id="America/New_York",offset=-18000000,dstSavings=3600000,useDaylight=true,transitions=235,lastRule=java.util.SimpleTimeZone[id=America/New_York,offset=-18000000,dstSavings=3600000,useDaylight=true,startYear=0,startMode=3,startMonth=2,startDay=8,startDayOfWeek=1,startTime=7200000,startTimeMode=0,endMode=3,endMonth=10,endDay=1,endDayOfWeek=1,endTime=7200000,endTimeMode=0]],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2016,MONTH=2,WEEK_OF_YEAR=14,WEEK_OF_MONTH=5,DAY_OF_MONTH=30,DAY_OF_YEAR=90,DAY_OF_WEEK=4,DAY_OF_WEEK_IN_MONTH=5,AM_PM=1,HOUR=3,HOUR_OF_DAY=11,MINUTE=44,SECOND=30,MILLISECOND=399,ZONE_OFFSET=-18000000,DST_OFFSET=3600000]

答案 2 :(得分：3)

首先回答这个问题，是什么导致TypeScript不从angualr2导入模块？我应该使用Angular2配置TypeScript吗？您已导入模块加载器但未对其进行配置。您不必使用Angular2配置TypeScript，而是使用模块加载器。

由于接受的答案已过时（针对Angular2的测试版），

很多事情发生了变化，包括当前Angular 2候选版本（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目录。
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 文件

    <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 { }


    8. 安装依赖项

    保存所有上述文件后，在项目位置的终端窗口上运行 npm install ，这会将所有依赖项安装到node_modules目录，这可能需要一些时间取决于您的连接速度。

    正在运行的开发服务器

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

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

    Angular 2的Hello World

    就是这样！。

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

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

    来自angular.io

    的代码示例

答案 3 :(得分：2)

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

答案 4 :(得分：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
  }
}

答案 5 :(得分：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函数调用的文件。

答案 6 :(得分：0)

确保文件夹＆＃39; node_modules＆＃39; （单击显示隐藏文件）位于正确的位置（在项目的根目录中，与wwwroot同级）。还要检查@angular是否显示在项目 Dependencies 文件夹中：

[PROJ。名] /依赖/ NPM / @角... 的

当我将快速入门指南集成到新的ASP.NET Core项目中时，我正在移动文件，而node_modules文件夹放错位置。

希望这会有所帮助

答案 7 :(得分：-1)

您可能忘记了运行：

npm install

在您的angular-project /

下
相关问题
最新问题