logo标签列表

找不到模块“angular2/angular2”。

node.jstypescriptangular
23

我正在使用Angular2和Gulp开发一个Node应用程序。我已经编写了一个组件文件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

请帮忙修复错误。

1
@View已被删除，因此在Angular2中此代码不再有效。 - Satch3000
1
我认为有必要提到...从'angular2'和'@angular'导入之间存在差异。如果您使用cdn（即<script src="https://code.angularjs.org/<version>angular2.dev.js">），那么您将从'angular2'导入。如果您正在从npm安装angular2作为依赖项，则应导入'@angular'。此外，Angular2目前处于rc4阶段，正在发生许多变化。为了获取Angular2的最新更改，我建议查看angular.io网站上的5分钟快速入门。 - kimbaudi
11个回答
34

正如@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
如果我这样做/node_modules/angular2/typings/node/node.d.ts会与typings\node\node.d.ts发生冲突。 - Rhushikesh
typings\node\node.d.ts 是 Express 和 Mongoose 所需的。 - Rhushikesh
抱歉，我不太明白你的意思，但如果你是在谈论类型相关的问题，根据我的理解，在Angular2中现在不需要使用typings，因为这已经预定义在Angular2库中了。 - Pardeep Jain
我非常确定您不需要导入NgClass和NgIf，因为它们已经内置在Angular2中了。 - kimbaudi
是的，@kimbaudi，你不需要导入它们，但只是为了参考而发布。 - Pardeep Jain
24

在即将进入beta版之前，它改变了模块。

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

FYI：Bootstrap 也已更改为 

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

因此，网络上很多博客文章都已经过时了 :-(

如果我这样做 /node_modules/angular2/typings/node/node.d.ts 会与 typings\node\node.d.ts 冲突。 - Rhushikesh
typings\node\node.d.ts是express和mongoose所需的。 - Rhushikesh
1
您可能需要编辑并重新发布您的问题，因为您原始的问题已经得到解决，而您的标题不会吸引您所需的 TypeScript 专家。 - Simon H
我认为它从 import {bootstrap} from 'angular2/platform-browser'; 改变为 import {bootstrap} from 'angular2/platform-browser-dynamic';。 - kimbaudi
4
根据 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';
3
请注意，随着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'

这是从上面的yups更新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
3

您试图从错误/旧的node_modules目录访问组件。 请从以下目录访问组件：

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

替换为：import { Component, View } from '@angular/core';

并且

从下面的路径访问bootstrap：

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

你需要在最终版本中更新Angular2版本 --

然后像这样使用 ----

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

有一个更新的库，类似于 '@angular/core'

0

在之前的版本中，我们可以使用“import from 'angular2/angular2'”来导入Angular2 / AngularJS的模块。但是现在这种方式已经不再被支持了。因此，我们需要从'angular2/core'中导入相同的模块。如果需要详细参考，请访问（https://angular.io/guide/quickstart）。

是的，快速入门是跟上Angular2变化的最佳方式。 - kimbaudi
0

开启一个angular2项目的最佳方式是使用Angular CLI。

Angular CLI使创建一个已经可以直接使用的应用程序变得容易。它已经遵循了我们的最佳实践！

请查看此链接以获取更多详细信息。

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

'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

    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
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]
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接