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