Non è ansible trovare il modulo ‘angular2 / angular2’

Sto sviluppando un’app nodo con angular2 e gulp. Ho scritto un file di accesso login.ts come segue:

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

E il mio file bootstrap.ts è:

 import {bootstrap} from 'angular2/angular2'; import {login} from './components/login/login'; bootstrap(login); 

ma quando compilo questi file mi dà i seguenti errori:

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

Ecco il mio tsconfig.json:

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

Ho installato la digitazione per angular2 usando:

 tsd install angular2 --save 

Si prega di aiutare a correggere l’errore.

yups come detto dall’errore @simon è nelle importazioni. ma per ulteriori importazioni ho postato questa risposta potrebbe essere utile anche per altri.

 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' 

aggiornare –

@View non è più in Angular2 ora, quindi non c’è bisogno di importare

 import {view} from 'angular2/core' 

Aggiornamento 2

A partire da angular2 è in RC quindi c’è un cambiamento di rottura in tutte le importazioni ecco la lista se tutte le importazioni aggiornate –

 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 

Ha cambiato modulo appena prima di passare alla versione beta

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

A proposito: bootstrap anche cambiato a

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

di conseguenza molti post del blog in rete non sono aggiornati 🙁

Come per la nuova versione di Angular2 rc1, puoi aggiornare il tuo package.json a

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

Oltre a questo, importa anche come segue nel tuo componente o contenitore:

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

Si prega di notare che in forma di rilascio finale Angular2 la risposta corretta è questa.

 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' 

Questo è vero come detto nell’aggiornamento 2 di yups di cui sopra

 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 

Stai provando ad accedere a Component dalla directory errata / vecchia di node_modules. Si prega di accedere a Componente da

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

invece di: import { Component, View } from 'angular2/angular2';

E

Accedere al bootstrap dal percorso più basso:

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

devi aggiornare la versione di Angular2 nella versione finale –

E poi usa come —-

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

c’è una libreria aggiornata come — '@angular/core'

‘angular2 / angular2’ non è una dipendenza valida di angular2

devi prima controllare che il file package.json “@ angular / core” esista o no

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

guarda il file del componente in questo modo e anche tu usi troppo formGroup come 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] }); } 

di quello che devi importare ReactiveFormsModule nel file app.module.ts
import {ReactiveFormsModule} da ‘@ angular / forms’;

senza modulo ReactiveFormsModuleGroup non funziona fa errore

 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] }) 

Il modo migliore per dare un calcio al progetto angular2 è usare la CLI angular.

La CLI Angolare semplifica la creazione di un’applicazione già funzionante, pronta all’uso. Segue già le nostre migliori pratiche!

si prega di controllare questo per maggiori dettagli.

l’importazione da ” angular2 / angular2 ‘era nella versione precedente che ora non è più supportata. Quindi ora dobbiamo importare lo stesso da’ angular2 / core’.Per usare i riferimenti di dettaglio ( https://angular.io/guide/quickstart )

 import {Component} from "@angular/core"; @Component({ selector: "userForm", template: '
' }); export class userForm{ public flag = false; //boolean value: true/false }
  • Prima aggiorna le tue liberies angular2 su packege.json.
  • Secondo

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