web-dev-qa-db-fra.com

Impossible de trouver le module 'angular2/angular2'

Je développe une application de noeud avec angular2 et gulp. J'ai écrit un fichier de composant login.ts comme suit:

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 {

}

Et mon fichier bootstrap.ts est:

import {bootstrap} from 'angular2/angular2';

import {login} from './components/login/login';

bootstrap(login);

mais lorsque je compile ces fichiers, cela me donne les erreurs suivantes:

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

Voici mon tsconfig.json:

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

J'ai installé le dactylographie pour angular2 en utilisant:

tsd install angular2 --save

S'il vous plaît aider à corriger l'erreur.

node.jstypescriptangular
23
Rhushikesh

yups comme dit par @simon erreur est dans les importations. mais pour d'autres importations, j'ai posté cette réponse peut-être est-ce utile pour d'autres aussi.

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'

mettre à jour -

@View n'est plus dans angular2 maintenant, donc pas besoin d'importer

import {view} from 'angular2/core'

Mise à jour 2

Comme angular2 est dans RC, il y a un changement radical dans toutes les importations. Voici la liste si toutes les importations mises à jour - 

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

Il a changé le module juste avant la bêta de passer à

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

FYI: bootstrap également changé en 

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

par conséquent, beaucoup de billets de blog sur le net sont obsolètes :-(

24
Simon H

Selon la nouvelle version de Angular2 rc1, vous pouvez mettre à jour votre package.json pour

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

En plus de cela, importez également comme suit dans votre composant ou conteneur:

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

Vous essayez d'accéder à Component à partir du mauvais/ancien répertoire de node_modules . Veuillez accéder à Component à partir de 

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

au lieu de: import { Component, View } from 'angular2/angular2';

ET 

Accéder au bootstrap depuis le chemin ci-dessous:

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

Veuillez noter que, dans la version finale de Angular2, la réponse correcte est la suivante.

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'

Ceci est vrai comme indiqué dans la mise à jour 2 du yups par le haut

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

vous devez mettre à jour la version Angular2 en version finale -

Et puis utiliser comme ----

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

il y a une bibliothèque mise à jour comme --- '@angular/core'

2
Ravindra Gupta

'angular2/angular2' n'est pas une dépendance valide de angular2

vous devez d'abord vérifier que le fichier package.json "@ angular/core" existe ou non

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

voyez le fichier de composant comme celui-ci et utilisez également 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]
        });
    }

que vous devez importer ReactiveFormsModule dans le fichier app.module.ts
import {ReactiveFormsModule} from '@ angular/forms';

sans ReactiveFormsModule formGroup not work it make error

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

Le meilleur moyen de lancer le projet angular2 est d'utiliser Angular CLI.

La CLI angulaire facilite la création d’une application qui fonctionne déjà, tout de suite. Il suit déjà nos meilleures pratiques!

s'il vous plaît vérifier ceci pour plus de détails.

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

import de '' angular2/angular2 'était dans la version précédente qui n'était plus supportée maintenant. Alors maintenant, nous devons importer le même depuis' angular2/core '. Pour une référence détaillée use ( https://angular.io/guide/quickstart )

0
user3776219