typescript 找不到模块“angular2/angular2”

Cannot find module 'angular2/angular2'

提问by Rhushikesh

I am developing an node app with angular2 and gulp. I have written a component file login.ts as follows:

我正在开发一个带有 angular2 和 gulp 的节点应用程序。我写了一个组件文件 login.ts 如下：

import {Component, View} from 'angular2/angular2';
import {FormBuilder,  formDirectives } from 'angular2/forms';
@Component({
  selector: 'login',
  injectables: [FormBuilder]
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [formDirectives]
})

export class login {

}

And my bootstrap.ts file is:

我的 bootstrap.ts 文件是：

import {bootstrap} from 'angular2/angular2';

import {login} from './components/login/login';

bootstrap(login);

but when I compile these files it gives me the following errors:

但是当我编译这些文件时，它给了我以下错误：

client\bootstrap.ts(1,25): error TS2307: Cannot find module 'angular2/angular2'.
client\components\login\login.ts(1,31): error TS2307: Cannot find module 'angular2/angular2
client\components\login\login.ts(2,45): error TS2307: Cannot find module 'angular2/forms'.

Here is my tsconfig.json:

这是我的 tsconfig.json：

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

I have installed the typing for angular2 using:

我已经使用以下方法安装了 angular2 的输入：

tsd install angular2 --save

Please help to fix the error.

请帮助修复错误。

回答by Pardeep Jain

yups as said by @simon error is in imports. but for further imports i have posted this answer may be this is useful for others too.

是的，正如@simon 所说，错误是在进口中。但是对于进一步的进口，我发布了这个答案可能对其他人也有用。

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core'; 

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

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf  NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'

update -

更新 -

@Viewis no more in angular2 now, so no need to import

@View现在不再是 angular2，所以不需要导入

import {view} from 'angular2/core'

Update 2

更新 2

As of angular2 is in RC so there is breaking change in all imports here is the list if all updated imports -

由于 angular2 在 RC 中，因此所有导入都发生了重大变化，如果所有更新的导入，这里是列表 -

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/common -> @angular/common
angular2/common_dom -> @angular/common
angular2/platform/browser -> @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router
angular2/platform/testing/browser -> @angular/platform-browser-dynamic/testing

回答by Simon H

It changed module just ahead of going beta to

它在测试之前将模块更改为

import {Component, View} from 'angular2/core';

FYI: bootstrap also changed to

仅供参考：引导程序也更改为

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

as a result a lot of the blog posts on the net are out of date :-(

结果网上的很多博客帖子都过时了:-(

回答by Soumya

As per the new release of Angular2 rc1, you can update your package.json to

根据 Angular2 rc1 的新版本，您可以将 package.json 更新为

"dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    .....
 }

In addition to this also import as following in your component or container:

除此之外，还可以在您的组件或容器中按以下方式导入：

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from '@angular/router-deprecated';

回答by akinmail

Please note that as form Angular2 final release the correct answer is this.

请注意，作为 Angular2 最终版本的正确答案是这样的。

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular/core'; 

import {bootstrap} from 'angular/platform/browser';

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf  NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular/common';

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular/router';

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular/http'

This is true as said in yups update 2 from above

正如上面的 yups update 2 所说的那样，这是真的

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/common -> @angular/common
angular2/common_dom -> @angular/common
angular2/platform/browser -> @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router
angular2/platform/testing/browser -> @angular/platform-browser-dynamic/testing

回答by Slack

You are trying to access Component from wrong/old directory of node_modules. Please access Component from

您正在尝试从 node_modules 的错误/旧目录访问组件。请访问组件

import { Component, OnInit } from '@angular/core';

instead of : import { Component, View } from 'angular2/angular2';

代替 ： import { Component, View } from 'angular2/angular2';

AND

和

Access bootstrap from bellow path :

从波纹管路径访问引导程序：

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

回答by Ravindra Gupta

you have to Update Angular2 version in final version --

你必须在最终版本中更新 Angular2 版本——

And then use like ----

然后使用像----

import { Component } from '@angular/core';

there is a updated library like --- '@angular/core'

有一个更新的库，如 --- '@angular/core'

回答by Manrah

import from ''angular2/angular2' was in previous version which no longer supported now .So Now we have to import the same from 'angular2/core'.For detail reference use (https://angular.io/guide/quickstart)

import from ''angular2/angular2' 是以前的版本，现在不再支持。所以现在我们必须从 'angular2/core' 导入相同的内容。详细参考使用（https://angular.io/guide/quickstart）

回答by AMITKUMAR BORKAR

import {Component} from "@angular/core";

@Component({
  selector: "userForm",
  template: '<div><input type="text" name="name" [disabled]="flag"/></div>'
});

export class userForm{
 public flag = false; //boolean value: true/false
}

回答by jayesh chaudhary

'angular2/angular2' is not a valid dependencies of angular2

'angular2/angular2' 不是 angular2 的有效依赖项

you have to first check package.json file "@angular/core" exist or not

您必须首先检查 package.json 文件“@angular/core”是否存在

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "2.0.0",
    "@angular/router-deprecated": "2.0.0",
    "@angular/upgrade": "2.0.0",
    .....
 }

see the component file like this and also you have too use formGroup as belove

像这样查看组件文件，您也将 formGroup 用作挚爱

    import { Component, OnInit, DoCheck } from '@angular/core'
    import { Router } from '@angular/router'

    import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'

    @Component({
      selector: 'app-user-profile',
      templateUrl: './user-profile.component.html',
      styleUrls: ['./user-profile.component.scss'],
    })
    export class UserProfileComponent implements OnInit, DoCheck {
      profileForm: FormGroup

      constructor(private fb: FormBuilder) {
        this.profileForm = this.fb.group({
          firstName: ['', Validators.required],
          lastName: ['', Validators.required],
          email: ['', Validators.required],
          mobileNo: ['', Validators.required]
        });
    }

than you have to import ReactiveFormsModule in app.module.ts file
import { ReactiveFormsModule } from '@angular/forms';

without ReactiveFormsModule formGroup not work it make error

比你必须在 app.module.ts 文件中
导入 ReactiveFormsModule import { ReactiveFormsModule } from '@angular/forms';

没有 ReactiveFormsModule formGroup 不工作它会出错

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserProfileComponent } from './user-profile.component';

import { UserProfileRoutingModule } from './user-profile-routing.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    UserProfileRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [UserProfileComponent]
})

回答by UniCoder

The best way to kick of angular2project is using Angular CLI.

启动angular2项目的最佳方式是使用 Angular CLI。

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

Angular CLI 可以轻松创建开箱即用的应用程序。它已经遵循我们的最佳实践！

please check thisfor more details.

请检查此了解更多详情。