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

Question

提问by Rivadiz

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

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

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

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

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

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

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

I am getting errors like,

我收到这样的错误，

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

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

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

所以我已经上搜索SE和发现，system.js并require.js在装货前添加加载angular2。

any way I managed to load the both libraries,

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

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

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

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

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

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

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

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

我在 TypeScript 编译器上收到此错误main.ts，它编译为main.js，

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

TypeScript compiles everything but not importing from angular.

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

my simple index.htmlis shown below,

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

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

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

I am totally new to TypeScript,

我对 TypeScript 完全陌生，

Thank you so much for any help

非常感谢您的帮助

Update

更新

the tsc main.ts --watch output:

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.

Answer 1

回答by Jai

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.

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

Angular2 5 min quickstart page @ angular.io.

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

What you need to have basically to start:

您基本上需要具备以下条件才能开始：

Node.jswith npm package manager.
Typescriptwith compiler.
A text editor or any IDE, VS Code.
Any browser, like Chrome.

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

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

安装 node js，它还安装 npm (node package manager)。现在，您需要按照以下步骤开始：

Create a root folder name of your choice like ng2Playground.
Now you have to create one more folder inside it which actually holds all the .tsfiles/ Component files, You can name it appname is just as per docs.
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
When you set it up, as we are not finished yet but you can npm startwhen we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.

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

Now what should be there in these files as per point 3.

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

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

Going very well, congratulations! Yet we need the most important file index.html.

进展顺利，恭喜！然而我们需要最重要的文件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>

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.

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

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

软件包安装完成后，您可以找到一个名为node_modules的文件夹，其中包含package.json.

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

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

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

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

Now as per point 2, we have a folder named appnow we will put our .tsfiles in it.

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

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

创建一个名为的文件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.

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

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

System.import('app/main')

This the content of main.ts:

这是内容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.

Now we are done.

现在我们完成了。

Yay!!!

好极了！！！

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

然而我们需要运行它，为此我们必须cd ng2Playgroud进入它。我们需要从命令提示符运行这个命令，或者如果你安装了 git bash 运行这个：

npm start

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

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

Answer 2

回答by Randall Melton

I was able to resolve this issue by adding "moduleResolution" : "node" to my tsconfig.json file

我能够通过将 "moduleResolution" : "node" 添加到我的 tsconfig.json 文件来解决这个问题

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

Answer 3

回答by All ?? Vаи?тy

first of all answering the question, What is causing TypeScript not to import modules from angualr2? should I configure TypeScript with Angular2?You've imported module loader but not configured it. You don't have to configure TypeScript with Angular2 but the module loader.

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

Since the accepted answer is outdated(aimed at a beta release of Angular2),

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

A lot of things changed including the module loader in the current Release Candidate of Angular 2 (RC2), This is what works for me,

很多东西都发生了变化，包括当前 Angular 2 (RC2) 候选版本中的模块加载器，这对我有用，

The directory structure.

目录结构。

.                             # 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

The files are.

文件是。

app: App directory where the project files reside.
app.component.ts: App component file
main.ts: Entry point and bootstrap
bs-config.js: Lite Server (a dev server based on browsersync) configuration
index.html: Index page of the application
node_modules: where the npm packages are installed
package.json: npm configuration file
systemjs.config.js: SystemJS configuration
tsconfig.json: TypeScript Compiler configuration
typings.json: Type definitions

app：项目文件所在的应用程序目录。
app.component.ts: App 组件文件
main.ts: 入口点和引导程序
bs-config.js: Lite Server (一个基于浏览器同步的开发服务器) 配置
index.html: 应用程序的索引页面
node_modules: npm 包的安装位置
package.json: npm 配置文件
systemjs.config.js：SystemJS 配置
tsconfig.json：TypeScript 编译器配置
Typings.json：类型定义

Contents of each file.

每个文件的内容。

index.htmlfile

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

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

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);

tsconfig.json

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

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

main.ts

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

app.component.ts

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

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>

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

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);

tsconfig.json

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

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

main.ts

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

app.component.ts

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

Installing dependencies

安装依赖

After saving all the above files, run npm installon a terminal window at the project location, this will install all the dependencies to node_modulesdirectory which may take some time depending on your connection speed.

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

Running Developement server

运行开发服务器

After installing all the dependencies, run npm starton terminal at the project location. This will run the typescript compilerand the lite-serverconcurrently, this helps compile/transpile the code and reload the webpage whenever you change the source code.

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

Now a new browser window might open. If not, point your favorite browser to **http://127.0.0.1:3000/**or http://localhost:3000/, if everything goes well you will see a page saying,

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

Hello World from Angular 2

来自 Angular 2 的 Hello World

That is it!.

这就对了！。

If you don't want the lite-server to open the browser automatically each time you run npm start, add the following to your bs-config.js.

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

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

code samples from angular.io

来自angular.io 的代码示例

Answer 4

回答by Sebastián Lara

Use '@angular/core'instead 'angular2/core'

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

Answer 5

回答by Pardeep Jain

Do this in index.html:

在 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>

try using this your first component:

尝试使用它作为您的第一个组件：

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

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

bootstrap(App);

your Index.html file has missing alot. like importing main component using system.js. i.e System.import('App');

您的 Index.html 文件丢失了很多。比如使用 system.js 导入主要组件。IESystem.import('App');

tsconfig.json:

tsconfig.json：

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

Answer 6

回答by Thierry Templier

You should import these files:

您应该导入这些文件：

<!-- 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>

And use this configuration for SystemJS:

并为 SystemJS 使用此配置：

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

I assume that your TypeScript files are located in a appsub folder and the app/boot.tsis the one that contains the call to the bootstrapfunction.

我假设您的 TypeScript 文件位于一个app子文件夹中，并且该文件app/boot.ts包含对该bootstrap函数的调用。

Answer 7

回答by Carlos R Balebona

Make sure folder 'node_modules' (click show hidden files) is in the right location (in the project's root, sibling with wwwroot). Also check @angular is showing in the project Dependenciesfolder:

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

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

[项目。名称]/Dependencies/npm/@angular...

I was moving files around as I was integrating the quickstart guide into a new ASP.NET Core project, and the node_modules folder was misplaced.

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

hope this helps

希望这可以帮助

Answer 8

回答by Inoubli

You may forgot to run :

你可能忘了运行：

npm install

under your angular-project/

在你的角度项目/

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

提问by Rivadiz

回答by Jai

3.1 : tsconfig.json:

3.2 : typings.json

3.3 : package.json

3.1：tsconfig.json：

3.2：typings.json

3.3：package.json

3.4 : index.html

3.4 : index.html

Okay!

好的！

Yay!!!

好极了！！！

回答by Randall Melton

回答by All ?? Vаи?тy

Contents of each file.

每个文件的内容。

Installing dependencies

安装依赖

Running Developement server

运行开发服务器

Hello World from Angular 2

来自 Angular 2 的 Hello World

回答by Sebastián Lara

回答by Pardeep Jain

回答by Thierry Templier

回答by Carlos R Balebona

回答by Inoubli

相关推荐

最近更新

标签

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

提问by Rivadiz

回答by Jai

3.1 : tsconfig.json:

3.2 : typings.json

3.3 : package.json

3.1：tsconfig.json：

3.2：typings.json

3.3：package.json

3.4 : index.html

3.4 : index.html

Okay!

好的！

Yay!!!

好极了！！！

回答by Randall Melton

回答by All ?? Vаи?тy

Contents of each file.

每个文件的内容。

Installing dependencies

安装依赖

Running Developement server

运行开发服务器

Hello World from Angular 2

来自 Angular 2 的 Hello World

回答by Sebastián Lara

回答by Pardeep Jain

回答by Thierry Templier

回答by Carlos R Balebona

回答by Inoubli

相关推荐

Javascript 使滚动侧边栏停止在页脚处

将 php 数组转换为 Javascript

Javascript 使用 lodash 检查对象中是否存在键

在 JavaScript 中将字符串转换为日期

相关推荐

最近更新

标签