CODEWITHSUNDEEP
node.jstypescriptangular
Rhushikesh
Rhushikesh

Reputation: 3710

Cannot find module 'angular2/angular2'

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.

Upvotes: 23

Views: 12991

Answers (11)

AMITKUMAR BORKAR
AMITKUMAR BORKAR

Reputation: 1

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
}

Upvotes: 0

Slack
Slack

Reputation: 109

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

Upvotes: 3

Manrah
Manrah

Reputation: 566

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)

Upvotes: 0

UniCoder
UniCoder

Reputation: 3243

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.

Upvotes: 0

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

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

 }

Upvotes: -1

jayesh chaudhary
jayesh chaudhary

Reputation: 1

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

Upvotes: 0

Ravindra Gupta
Ravindra Gupta

Reputation: 91

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'

Upvotes: 2

akinmail
akinmail

Reputation: 668

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

Upvotes: 3

Soumya
Soumya

Reputation: 233

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

Upvotes: 4

Pardeep Jain
Pardeep Jain

Reputation: 86800

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

Upvotes: 34

Simon H
Simon H

Reputation: 21037

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 :-(

Upvotes: 24

Related Questions