更新 -

Question

我正在开发一个带有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的输入法

tsd install angular2 --save

请帮助解决错误。

Answer 1

是的@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'

更新 -

@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

它在测试之前将模块改为

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

仅供参考：bootstrap也改为

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

因此，网上很多博客文章都已过时： - （

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'

如上面的yss 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

Answer 5

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

访问组件

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

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

AND

从下面的路径访问bootstrap：

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

Answer 6

您必须在最终版本中更新Angular2版本 -

然后使用像----

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

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

Answer 7

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

Answer 8

<强>＆＃39; angular2 / angular2＆＃39;不是angular2

的有效依赖项

你必须先检查package.json文件＆＃34; @ angular / core＆＃34;是否存在

"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
从＆＃39; @ angular / forms＆＃39;中导入{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 9

angular2 项目的最佳方法是使用Angular CLI 。

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

请check this了解详情。

Answer 10

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
}

Answer 11

首先在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 {

 }

找不到模块'angular2 / angular2'

11 个答案:

更新 -

更新2