node.js - starter - no se encuentra el modulo @angular/core

No se puede encontrar el módulo ''angular2/angular2''

Question

Estoy desarrollando una aplicación de nodo con angular2 y trago. He escrito un archivo componente login.ts de la siguiente manera:

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

Y mi archivo bootstrap.ts es:

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

pero cuando compilo estos archivos me da los siguientes errores:

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

Aquí está mi tsconfig.json:

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

He instalado la escritura para angular2 usando:

tsd install angular2 --save

Por favor, ayuda a corregir el error.

Answer 1

Cambió el módulo justo antes de pasar a beta

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

FYI: bootstrap también cambió a

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

Como resultado, muchas de las publicaciones de blog en la red están desactualizadas :-(

Answer 2

Está intentando acceder a Component desde el directorio incorrecto / antiguo de node_modules. Acceda a Componente desde

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

en lugar de: import { Component, View } from ''angular2/angular2'';

Y

Acceder a bootstrap desde la ruta de abajo:

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

Answer 3

La mejor manera de patear el proyecto angular2 es usar Angular CLI .

La CLI Angular facilita la creación de una aplicación que ya funciona, desde el primer momento. ¡Ya sigue nuestras mejores prácticas!

por favor verifique esto para más detalles.

Answer 4

Sí, como dijo el error @simon, está en las importaciones. pero para futuras importaciones, he publicado esta respuesta, puede ser útil para otros también.

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

actualización -

@View ya no está en angular2, por lo que no es necesario importar

import {view} from ''angular2/core''

Actualización 2

A partir de angular2 está en RC, por lo que hay un cambio importante en todas las importaciones. Aquí está la lista si todas las importaciones actualizadas:

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

Answer 5

Según la nueva versión de Angular2 rc1, puede actualizar su 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",
.....
}

Además de esto, también importe lo siguiente en su componente o contenedor:

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

Answer 6

Tenga en cuenta que, como versión final de Angular2, la respuesta correcta es esta.

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

Esto es cierto como se dijo en la actualización 2 de arriba desde arriba

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

Answer 7

la importación desde '''' angular2 / angular2 ''estaba en la versión anterior que ya no era compatible ahora. Así que ahora tenemos que importar lo mismo desde'' angular2 / core ''. Para uso de referencia detallada ( https://angular.io/guide/quickstart )

Answer 8

tienes que actualizar la versión Angular2 en la versión final -

Y luego usar como ----

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

hay una biblioteca actualizada como --- ''@angular/core''

Answer 9

''angular2 / angular2'' no es una dependencia válida de angular2

primero debe verificar si el archivo package.json "@ angular / core" existe 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",
.....
}

vea el archivo de componentes como este y también debe usar formGroup como 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]
});
}

de lo que tiene que importar ReactiveFormsModule en el archivo app.module.ts
importar {ReactiveFormsModule} desde ''@ angular / forms'';

sin ReactiveFormsModule formGroup no funciona, comete un 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]
})

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

Answer 11

• Primero actualice sus bibliotecas angulares2 en packege.json.

• Segundo

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