web-dev-qa-db-ja.com

モジュール '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のタイピングをインストールしました。

tsd install angular2 --save

エラーの修正を手伝ってください。

node.jstypescriptangular
23
Rhushikesh

@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はもはやangle2にないので、インポートする必要はありません

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
34
Pardeep Jain

ベータに移行する直前にモジュールを変更しました

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

参考までにbootstrap=も変更されました

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

その結果、ネット上の多くのブログ投稿が古くなっています:-(

24
Simon H

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
Soumya

Node_modulesの間違った/古いディレクトリからコンポーネントにアクセスしようとしています。からコンポーネントにアクセスしてください

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

の代わりに ： import { Component, View } from 'angular2/angular2';

そして

アクセスbootstrap=以下のパスから：

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

フォーム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
akinmail

最終バージョンでAngular2バージョンを更新する必要があります-

そして、次のように使用します----

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

--- '@angular/core'のような更新されたライブラリがあります

2
Ravindra Gupta

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

このようなコンポーネントファイルを参照してください。また、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]
        });
    }

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]
})
0
jayesh chaudhary

angular2プロジェクトを開始する最良の方法は、Angular[〜＃ 〜] cli [〜＃〜]。

Angular CLIを使用すると、すぐに動作するアプリケーションを簡単に作成できます。すでにベストプラクティスに従っています！

チェックしてください 詳細をご覧ください。

0
UniCoder
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
AMITKUMAR BORKAR

'' angular2/angular2 'からのインポートは以前のバージョンでしたが、現在はサポートされていません。したがって、' angular2/core 'から同じものをインポートする必要があります。詳細な参照用に（ https://angular.io/ガイド/クイックスタート ）

0
Manpreet