找不到模块'angular2/angular2'

Posted 2023-03-07

【中文标题】找不到模块\'angular2/angular2\'

【英文标题】：Cannot find module 'angular2/angular2'找不到模块'angular2/angular2'

【发布时间】：2016-04-14 08:11:24

【问题描述】：

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

请帮助修复错误。

【问题讨论】：

@View 已被删除，因此此代码在 Angular2 中不再有效

我认为重要的是要提到......从'angular2'和'@angular'导入之间存在差异。如果您使用的是 cdn（即<script src="https://code.angularjs.org/<version>angular2.dev.js">），那么您将从“angular2”导入。如果您将 angular2 作为 npm 的依赖项安装，那么您将导入“@angular”。此外，Angular2 目前在 rc4 中，并且正在发生很多变化。要获取 Angular2 的最新更改，我建议您查看 angular.io 网站上的 5 分钟快速入门。

【参考方案1】：

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

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.t 发生冲突

typings\node\node.d.ts 需要快递，猫鼬

对不起，我没听明白，但如果你在谈论我所说的类型，现在不需要在 angular2 中使用类型，因为这是在 angular2 库中预定义的

我很确定您不需要导入 NgClass 和 NgIf，因为它们是 Angular2 内置的。

是的，@kimbaudi 你不需要导入这些，只是为了参考而发布。

【参考方案2】：

它在测试版之前更改了模块

import Component, View from 'angular2/core';

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

import bootstrap from 'angular2/platform/browser';

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

【讨论】：

如果我这样做了 /node_modules/angular2/typings/node/node.d.ts 与 Typings\node\node.d.ts 发生冲突

typings\node\node.d.ts 需要快递，猫鼬

您可能需要编辑并重新发布您的问题，因为您的原始问题已经解决，您的标题不会吸引您需要的打字稿专家

我认为它从 import bootstrap from 'angular2/platform-browser'; 更改为 `import bootstrap from 'angular2/platform-b​​rowser-dynamic';

【参考方案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';

【参考方案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'

正如上面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

【参考方案5】：

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

访问组件

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

而不是：import Component, View from 'angular2/angular2';

与

从以下路径访问引导程序：

import  bootstrap  from 'angular2/platform/browser';

【参考方案6】：

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

然后用like ----

import  Component  from '@angular/core';

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

【参考方案7】：

'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 从“@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]
)

【参考方案8】：

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

Angular CLI 可以很容易地创建一个已经可以运行的应用程序，开箱即用。它已经遵循了我们的最佳做法！

请check this了解更多详情。

【参考方案9】：

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

【讨论】：

是的，快速入门是了解 Angular2 变化的最佳方式

【参考方案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

【参考方案11】：

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

第二

 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