Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 282
Rhushikesh Avatar asked Jan 09 '16 18:01

Rhushikesh


2 Answers

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
like image 77
Pardeep Jain Avatar answered Oct 12 '22 10:10

Pardeep Jain


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

like image 24
Simon H Avatar answered Oct 12 '22 11:10

Simon H