Cannot find module 'angular2/angular2'

Question

I am developing an node app with angular2 and gulp. I have written a component file login.ts as follows:

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 {

}

And my bootstrap.ts file is:

import {bootstrap} from 'angular2/angular2';

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

bootstrap(login);

but when I compile these files it gives me the following errors:

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

Here is my tsconfig.json:

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

I have installed the typing for angular2 using:

tsd install angular2 --save

Please help to fix the error.

Answer 1

yups as said by @simon error is in imports. but for further imports i have posted this answer may be this is useful for others too.

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'

update -

@View is no more in angular2 now, so no need to import

import {view} from 'angular2/core'

Update 2

As of angular2 is in RC so there is breaking change in all imports here is the list if all updated imports -

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 2

It changed module just ahead of going beta to

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

FYI: bootstrap also changed to

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

as a result a lot of the blog posts on the net are out of date :-(

Answer 3

As per the new release of Angular2 rc1, you can update your package.json to

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

In addition to this also import as following in your component or container:

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

Answer 4

Please note that as form Angular2 final release the correct answer is this.

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'

This is true as said in yups update 2 from above

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

You are trying to access Component from wrong/old directory of node_modules. Please access Component from

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

instead of : import { Component, View } from 'angular2/angular2';

AND

Access bootstrap from bellow path :

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

Answer 6

you have to Update Angular2 version in final version --

And then use like ----

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

there is a updated library like --- '@angular/core'

Answer 7

'angular2/angular2' is not a valid dependencies of angular2

you have to first check package.json file "@angular/core" exist or not

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

see the component file like this and also you have too use formGroup as 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]
        });
    }

than you have to import ReactiveFormsModule in app.module.ts file
import { ReactiveFormsModule } from '@angular/forms';

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

Answer 8

The best way to kick of angular2 project is using Angular CLI.

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

please check this for more details.

Answer 9

import from ''angular2/angular2' was in previous version which no longer supported now .So Now we have to import the same from 'angular2/core'.For detail reference use (https://angular.io/guide/quickstart)

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

• First update your angular2 liberies at packege.json.

• Second

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