找不到模块'angular2 / angular2'

我正在用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 { } 

而我的bootstrap.ts文件是：

 import {bootstrap} from 'angular2/angular2'; import {login} from './components/login/login'; bootstrap(login); 

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

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

这是我的tsconfig.json：

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

我已经安装了用于angular2的input：

 tsd install angular2 --save 

请帮助解决这个错误。

Answer 1

由@simon错误说yups在import。 但进一步的import我已经发布这个答案可能是这对别人也是有用的。

 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' 

更新 –

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

 import {view} from 'angular2/core' 

更新2

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

Answer 2

它在testing版之前就改变了模块

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

FYI：bootstrap也变成了

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

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

Answer 3

根据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", ..... } 

除此之外，还可以在组件或容器中导入以下内容：

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

Answer 4

请注意，作为表格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' 

从上面的yup更新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 

Answer 5

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

然后使用像—-

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

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

Answer 6

'angular2 / angular2'不是angular2的有效依赖关系

你必须首先检查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", ..... } 

看到这样的组件文件，也可以使用formGroup作为belove

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

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

没有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] }) 

Answer 7

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

Angular CLI可以很容易地创build一个已经正常工作的应用程序。 它已经遵循我们的最佳实践！

请检查这个更多的细节。

Answer 8

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

Answer 9

• 首先在packege.json更新您的angular2 liberies。

• 第二

    import {Component} from "@angular/core"; import {FormBuilder } from "@angular/forms"; @Component({ selector: "login", providers: [FormBuilder], templateUrl: "/scripts/src/components/login/login.html" }) export class login { }