TS2307:在TypeScript上导入Angular2时找不到模块“ angular2 / core”

里瓦迪兹:

嗨,我有一点点Angular 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,它编译成main.js

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

TypeScript编译所有内容,但不编译所有内容。

我的简单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.
i

当您不熟悉TypeScript时我仍然建议您遵循angular.io文档5分钟启动那有具体的说明,并且很好地解释了如何开始使用它。

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

从根本上讲,您需要具备以下条件:

  1. Node.js的与NPM包管理器。
  2. 带编译器的打字稿
  3. 文本编辑器或任何IDE,VS Code
  4. 任何浏览器,例如Chrome

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

  1. 创建您选择的根文件夹名称,例如ng2Playground
  2. 现在,您必须在其中创建一个文件夹,其中实际上包含所有.ts文件/组件文件,您可以app 按docs命名
  3. 现在,在根目录下,您必须放置4个文件。
    3.1。tsconfig.json
    3.2 Types.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: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

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('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在浏览器中看到呈现的模板

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular2延迟加载模块错误'找不到模块'

找不到模块“ angular2 / core”

找不到外部模块'angular2 / angular2'-带打字稿的Angular2

在Visual Studio 2015更新1中找不到模块'angular2 / core'

找不到模块“ angular2 / angular2”

Angular 2使SystemJS找不到/ angular2 / http模块

Angular2 ASP.NET Core防伪令牌

角度2:错误TS2307:找不到模块'socket.io-client'

Angular2找不到嵌套模块

在Angular2中导入模块

Angular2找不到要素模块路线

错误TS2307:找不到HttpClientModule的模块'@ angular / common / http'

Angular2:找不到导入服务文件路径

错误TS2307:找不到模块'@ angular / core'

Angular 2(英雄之旅)教程:src / app / mock-heroes.ts(1,22)中的错误:错误TS2307:找不到模块“ ./hero”

Angular2,找不到模块“ app / models / user”错误

使用angular2.api.ts时,“未将模块angular2 / src / core / compiler / interfaces声明为依赖项”

Typescript编译器错误TS2307:在没有NPM的CDN中加载时,找不到模块“ angular2 / core”

Angular2找不到模块“ angular2 / core”,但应用程序有效

Angular2:模块未正确导入

angular2:找不到模块“ @ angular / core”

在我的应用程序angular2 aspnet核心中找不到错误angular2-cookies / core.js

将模块导入Angular2 App

找不到模块./in-memory-data.service Angular2

Angular2子模块导入问题

angular2 快速入门找不到名称“模块”

Angular2 TypeScript - 错误 TS2307:找不到模块“angular2/forms”

Angular2 找不到模块“../webservices”

在 Angular2 打字稿类中找不到模块